I. Pendahuluan
Hook – Membangun Rumah Digital
Bayangkan Anda sedang merencanakan pembangunan sebuah rumah. Sebelum menata interior, memilih cat, atau memasang lampu gantung, Anda pasti memulai dengan membuat fondasi yang kuat, mengatur letak dinding, dan menyiapkan kerangka struktur. Website tidak berbeda. Ia juga membutuhkan fondasi (HTML) dan “dinding” serta “cat” (CSS) supaya dapat berdiri tegak, terlihat menarik, dan nyaman dihuni oleh pengunjung.
Jika Anda belajar masing‑masing komponen tersebut secara berurutan—pertama fondasi, lalu dinding, lalu finishing—membuat website menjadi jauh lebih mudah daripada yang dibayangkan. Anda tidak perlu menjadi “guru kode” dengan gelar master; cukup ikuti langkah‑langkah berurutan yang kami susun di panduan ini.
Definisi Singkat
Output yang Akan Anda Dapatkan
Setelah menyelesaikan panduan ini, Anda akan memiliki:
- Sebuah file
index.htmlyang memuat markup (struktur) standar, lengkap dengan judul, heading, paragraf, gambar, dan tautan. - Sebuah file
main.cssyang menata tata letak, tipografi, warna, dan spasi sehingga halaman terlihat rapi dan profesional. - Folder gambar (
/img) yang siap di‑upload bersama kedua file tersebut.
Semua itu menghasilkan satu halaman web sederhana namun valid (memenuhi standar W3C) yang dapat Anda buka di setiap browser modern, serta di‑hosting secara gratis di GitHub Pages, Netlify, atau layanan serupa.
II. Persiapan Alat Tempur (Setting Up Your Workspace)
1. Pilih Text Editor (Editor Teks)
Editor teks adalah “palu” dan “mata gergaji” digital Anda. Berikut beberapa pilihan GRATIS yang ramah pemula:
Rekomendasi: VS Code karena dukungan ekstensif untuk web development dan tutorial banyak yang mengacu padanya.
2. Membuat Struktur Folder Proyek
- Buka file explorer (Windows Explorer, Finder, atau file manager Linux).
- Buat folder utama dengan nama proyek, misalnya
website-pertama. - Di dalam folder tersebut, buat sub‑folder
imguntuk menampung semua gambar yang akan Anda gunakan.
Struktur final akan terlihat seperti ini:
website-pertama/
│
├─ index.html ← file HTML utama
├─ main.css ← file CSS utama
└─ img/
├─ logo.png
└─ hero.jpgTip: Simpan semua file di satu folder agar tidak ada “file tidak ditemukan” ketika Anda menambahkan gambar atau stylesheet.
III. Membangun Fondasi dengan HTML (Building Structure)
1. Memahami Sintaksis Dasar HTML
- Elemen: Unit terkecil dalam HTML, biasanya ditulis dalam bentuk tag
<tagname>. - Tag pembuka:
<tagname>– menandai awal elemen. - Tag penutup:
</tagname>– menandai akhir elemen. - Konten: Apa yang berada di antara tag pembuka dan penutup (teks, gambar, tautan, dll).
Contoh sederhana:
<p>Hello, world!</p><p> adalah tag pembuka, </p> adalah tag penutup, dan Hello, world! adalah konten.
2. Struktur Dokumen Wajib
Berikut adalah anatomy dasar dari setiap dokumen HTML yang valid:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pertama Saya</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- Konten halaman dimulai di sini -->
</body>
</html>3. Memasukkan Konten Pertama
Berikut contoh konten dasar yang akan menjadi “rumah” Anda:
<body>
<!-- Header -->
<header>
<h1>Selamat Datang di Website Pertama Saya!</h1>
<p>Belajar HTML & CSS dari nol hingga mahir.</p>
</header>
<!-- Section utama -->
<section>
<h2>Apa Itu HTML?</h2>
<p>HTML adalah bahasa markup yang mendefinisikan struktur dasar sebuah halaman web.</p>
<h2>Apa Itu CSS?</h2>
<p>CSS mengontrol tampilan visual—warna, layout, tipografi—dari elemen HTML.</p>
</section>
<!-- Gambar ilustratif -->
<figure>
<img src="img/hero.jpg" alt="Ilustrasi membangun website">
<figcaption>Gambar ilustrasi proses pembuatan website.</figcaption>
</figure>
<!-- Footer -->
<footer>
<p>© 2026 Saya - Semua hak dilindungi.</p>
</footer>
</body>- Heading (
<h1>‑<h6>): Menunjukkan hierarki pentingnya teks.<h1>paling penting, biasanya hanya satu per halaman. - Paragraf (
<p>): Untuk teks naratif atau penjelasan. - Section / Article: Menyimpan bagian konten yang terpisah secara logis (tidak wajib, tapi membantu struktural).
- Figure & Figcaption: Mengelompokkan gambar beserta keterangan.
Catatan: Pastikan setiap tag dibuka dan ditutup dengan benar; kesalahan kecil seperti melupakan </p> dapat membuat seluruh dokumen tidak valid.
IV. Menghubungkan HTML dengan CSS
1. Mengenal Sintaksis CSS
Sebuah aturan CSS terbagi menjadi tiga bagian utama:
selector { property: value; }- Selector – Elemen atau kumpulan elemen HTML yang akan di‑style.
- Property – Nama atribut visual yang ingin diubah (misalnya
color,margin,font-size). - Value – Nilai yang diberikan pada properti (contoh
red,16px,center).
Contoh lengkap:
p {
color: #ff5555; /* memberi warna merah muda pada semua paragraf */
line-height: 1.6; /* memberi jarak antar baris 1.6 kali ukuran font */
}2. Cara Menghubungkan (Linking) CSS ke HTML
Pastikan baris berikut ada di dalam tag <head> pada file index.html:
<link rel="stylesheet" href="main.css">rel="stylesheet"memberi tahu browser bahwa file yang dimaksud merupakan stylesheet.href="main.css"menunjukkan lokasi relatif file CSS (di folder yang sama denganindex.html).
Jika nantinya Anda menaruh CSS di sub‑folder css/, ubah menjadi href="css/main.css".
3. Praktik Pertama CSS – Mengubah Warna Latar & Judul
Buka file main.css and tambahkan kode berikut:
/* 1️⃣ Mengatur warna latar belakang seluruh halaman */
body {
background-color: #f8f9fa; /* abu‑abu sangat terang – cocok untuk membaca */
font-family: Arial, Helvetica, sans-serif; /* font default yang mudah dibaca */
margin: 0; /* menghilangkan margin default browser */
padding: 0;
}
/* 2️⃣ Mengatur warna teks pada heading utama */
h1 {
color: #2c3e50; /* biru tua – kontras dengan latar */
text-align: center; /* judul berada di tengah */
margin-top: 40px;
}Simpan kedua file, lalu buka index.html di browser (klik dua kali pada file atau gunakan ekstensi Live Server di VS Code). Anda akan melihat latar halaman berubah menjadi abu‑abu terang, dan judul <h1> berwarna biru tua dengan posisi terpusat.
V. Berkenalan dengan CSS Selectors (Targeting Content)
1. Mengapa Tidak Boleh Hanya Pakai Tag Saja?
Jika Anda menulis:
p { color: #333; }Semua paragraf di seluruh halaman akan memiliki warna yang sama. Ini tidak fleksibel ketika Anda ingin menyorot satu paragraf tertentu atau mengaplikasikan style berbeda pada grup paragraf. Selanjutnya, menukar style di masa depan menjadi rumit karena harus menulis ulang setiap selector.
2. Tiga Selector Utama
Contoh Praktis
<!-- HTML -->
<h2 class="section-title">Apa Itu HTML?</h2>
<h2 class="section-title">Apa Itu CSS?</h2>
<p id="intro">HTML dan CSS adalah fondasi web modern.</p>/* CSS */
.section-title { /* Class selector: dapat dipakai berulang */
color: #34495e;
font-size: 1.8rem;
margin-top: 2rem;
}
#intro { /* ID selector: hanya satu */
font-weight: bold;
background-color: #eaf2f8;
padding: 0.5rem;
}3. Kombinasi Selector untuk Spesifikasi Lebih Tinggi
Anda bisa “menggabungkan” selector untuk menargetkan elemen yang lebih spesifik:
/* Semua <p> yang berada di dalam .section */
.section p {
line-height: 1.8;
}
/* <h2> dengan class .section-title yang berada di dalam #content */
#content h2.section-title {
border-bottom: 2px solid #bdc3c7;
padding-bottom: 0.3rem;
}Catatan: Semakin spesifik selector, semakin tinggi prioritasnya dalam cascading (urutan prioritas CSS). Namun gunakan selector yang sesederhana mungkin untuk memudahkan pemeliharaan kode.
VI. Menata Layout dengan Box Model (The Core of CSS Layout)
1. Konsep Dasar – Semua Elemen adalah “Kotak”
Setiap elemen HTML (baik <p>, <div>, <img>) diperlakukan oleh browser sebagai sebuah kotak yang memiliki empat lapisan:
+---------------------------+ | Margin | | +---------------------+ | | | Border | | | | +---------------+ | | | | | Padding | | | | | | +-----------+ | | | | | | | Content | | | | | | | +-----------+ | | | | | +---------------+ | | | +---------------------+ | +---------------------------+
2. Komponen Box Model
Tip Shay Howe (Ahli CSS): Selalu hitung lebar total sebelum menentukan ukuran kolom atau layout. Rumusnya:
Total width = width + padding‑left + padding‑right + border‑left + border‑right + margin‑left + margin‑right
3. Contoh Praktis – Membuat “Card” Sederhana
<div class="card">
<h3 class="card-title">Mengenal Box Model</h3>
<p class="card-body">Semua elemen HTML memiliki margin, border, padding, and content.</p>
</div>.card {
width: 300px; /* lebar kotak konten */
padding: 20px; /* ruang di dalam border */
border: 2px solid #3498db;
margin: 30px auto; /* margin otomatis untuk center */
background-color: #fff;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-radius: 8px; /* sudut melengkung */
}
.card-title {
margin-bottom: 12px;
color: #2c3e50;
}Mengenal Box Model
Semua elemen HTML memiliki margin, border, padding, dan content.
Jika Anda membuka halaman ini, Anda akan melihat sebuah kotak “card” berwarna putih dengan bayangan halus—semua berkat pemahaman Box Model.
VII. Sentuhan Akhir (Typography & Colors)
1. Mempercantik Teks
Contoh lengkap dalam main.css:
body {
font-size: 16px; /* default 1rem = 16px */
font-family: "Open Sans", Arial, sans-serif;
color: #333;
}
h1, h2, h3 {
font-family: "Montserrat", sans-serif;
line-height: 1.3;
margin-bottom: .5rem;
}Tip: Unduh font Google Fonts secara gratis dan tambahkan melalui<link>di<head>:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">2. Bermain Warna
Warna dalam CSS dapat dituliskan tiga cara:
Contoh penggunaan untuk palet warna yang konsisten:
:root {
--primary: #2980b9; /* biru utama */
--secondary: #e74c3c; /* merah aksen */
--bg-light: #f8f9fa; /* latar terang */
--text-dark: #2c3e50; /* teks utama */
}
/* Menggunakan variabel di seluruh stylesheet */
body { background-color: var(--bg-light); color: var(--text-dark); }
a { color: var(--primary); }
a:hover { color: var(--secondary); }Variabel CSS (--nama) memudahkan perubahan skema warna di masa depan hanya dengan mengedit satu tempat.
VIII. Kesimpulan & Langkah Selanjutnya
1. Review Singkat
Jika semua langkah di atas telah Anda praktikkan, selamat! Anda sekarang memiliki website statis pertama yang terstruktur dan tertata dengan baik.
2. Pesan Kunci
- Latihan teratur = otot memori yang kuat. Setiap kali Anda menulis kode baru, coba mengingat kembali apa fungsi masing‑mata tag/selector.
- Eksperimen: ubah nilai
color,margin,font-familysecara acak untuk melihat efeknya secara real‑time. - Validasi: gunakan W3C Markup Validation Service untuk memastikan HTML Anda bebas error.
3. Call‑to‑Action (CTA)
- Buat screenshot halaman “Website Pertama Anda” dan bagikan di kolom komentar. Ceritakan tantangan apa yang paling sulit dan apa yang membuat Anda paling bangga!
- Lanjutkan belajar dengan topik selanjutnya:
- Positioning (static, relative, absolute, fixed).
- Flexbox – layout modern berbasis baris/kolom yang responsif.
- Responsive Design dengan media queries.
Bonus: Jika Anda merasa sudah nyaman dengan dasar‑dasar ini, coba deploy website Anda ke GitHub Pages atau Netlify secara gratis. Langkah ini akan mengajarkan Anda bagaimana fileindex.htmldanmain.cssdapat diakses oleh siapa saja di internet.
Selamat berkreasi! Dengan fondasi HTML & CSS yang kuat, Anda selangkah lebih dekat menjadi developer web yang handal. Jangan ragu untuk mencoba, memperbaiki, dan berbagi hasil karya Anda. &🚀;
About
Tags
Popular
