Untuk membuat halaman web pertama, Anda tidak perlu langsung menguasai banyak bahasa pemrograman. Cukup mulai dengan editor teks, browser, dan sebuah file HTML. HTML menyusun isi halaman; CSS membantu mengatur tampilan; JavaScript digunakan ketika halaman membutuhkan interaksi. Di sini kita mulai dari struktur HTML, lalu mencoba sedikit CSS.
1. Siapkan berkas pertama
Buat folder proyek, lalu buat file bernama index.html. Gunakan editor seperti VS Code atau editor teks lain. Tulis kode berikut dan simpan:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Pertama Saya</title>
<meta name="description" content="Halaman pertama yang saya buat dengan HTML.">
</head>
<body>
<header><h1>Halo, dunia!</h1></header>
<main>
<p>Selamat datang di website pertama saya.</p>
<a href="https://example.com">Kunjungi contoh tautan</a>
</main>
<footer><p>Dibuat dengan HTML.</p></footer>
</body>
</html>2. Pahami struktur halaman
doctype menandai dokumen HTML modern. Bagian head berisi metadata, sedangkan body berisi konten yang terlihat. Elemen header, main, dan footer memberi struktur yang lebih mudah dipahami oleh browser dan teknologi bantu.
3. Buka dan ubah halaman
Buka file index.html di browser, lalu ubah judul dan paragraf sesuai kebutuhan. Simpan dan muat ulang halaman untuk melihat hasilnya. Coba tambahkan judul bagian dengan h2, daftar menggunakan ul dan li, serta tautan menggunakan a.
4. Tambahkan gambar dengan keterangan
Simpan gambar di folder proyek dan gunakan <img src="gambar.jpg" alt="Deskripsi gambar">. Isi teks alternatif dengan penjelasan yang relevan jika gambar menyampaikan informasi. Pastikan Anda memiliki hak menggunakan gambar dan ukuran filenya tidak terlalu besar.
5. Pelajari CSS dan responsivitas
Setelah struktur HTML siap, buat file CSS untuk mengatur warna, jarak, dan ukuran teks. Gunakan viewport, tata letak fleksibel, dan media query agar halaman nyaman dibaca pada ponsel maupun desktop. Periksa kontras warna, navigasi keyboard, dan ukuran teks.
6. Publikasikan dan terus perbaiki
Untuk online, Anda memerlukan hosting dan biasanya domain. Unggah berkas ke hosting, pastikan tautan dan gambar berfungsi, lalu uji halaman di beberapa perangkat. Buat judul dan deskripsi yang menggambarkan isi halaman; indeks dan peringkat mesin pencari tidak bisa dijamin. Untuk referensi elemen HTML, baca panduan HTML MDN.
Latihan: buat halaman profil sederhana
Coba buat halaman untuk usaha atau portofolio pribadi. Susun satu judul utama, paragraf perkenalan, daftar layanan, dan informasi yang dapat dihubungi. Gunakan h2 untuk masing-masing bagian, bukan memilih heading hanya karena ukuran hurufnya terlihat cocok. Struktur yang logis membantu pembaca dan teknologi bantu memahami isi halaman.
Tambahkan CSS eksternal
Buat file style.css di folder yang sama dengan index.html, lalu tambahkan <link rel="stylesheet" href="style.css"> di dalam head. Mulai dengan aturan berikut:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #1c2c42;
max-width: 900px;
margin: 0 auto;
padding: 24px;
}
img { max-width: 100%; height: auto; }
a { color: #2454cb; }Simpan kedua file lalu muat ulang browser. Lebar maksimum membuat paragraf lebih nyaman dibaca pada layar besar, sedangkan aturan gambar membantu mencegah gambar melebar keluar dari layar.
Periksa tautan dan struktur folder
Alamat relatif seperti gambar/foto.jpg dihitung dari lokasi file HTML. Jika gambar tidak muncul, periksa nama file, huruf besar-kecil, ekstensi, dan posisi folder. Saat memakai tautan ke halaman lain, pastikan tujuan benar dan teks tautan menjelaskan apa yang akan dibuka.
Dasar SEO dan aksesibilitas
Buat judul halaman yang unik dan deskripsi yang merangkum isi sebenarnya. Gunakan satu topik utama yang jelas, heading yang terurut, dan teks tautan yang bermakna. Tambahkan teks alternatif untuk gambar informatif; gambar yang murni dekoratif dapat memakai alt="". Jangan memasukkan kata kunci berulang-ulang jika membuat kalimat sulit dibaca.
Kesalahan umum dan langkah berikutnya
- File terbuka kosong: pastikan file disimpan sebagai
.html, bukan.txt, dan periksa penulisan tag. - CSS tidak berubah: periksa jalur file stylesheet, simpan perubahan, lalu muat ulang browser.
- Tampilan terlalu lebar di ponsel: pastikan meta viewport tersedia dan hindari lebar tetap yang melebihi layar.
- Gambar tidak tampil: cek kembali lokasi, nama, ekstensi, dan hak penggunaan gambar.
Setelah memahami struktur dan styling dasar, lanjutkan dengan formulir, tata letak CSS Grid atau Flexbox, lalu JavaScript untuk interaksi. Latihan kecil yang selesai dan dapat dibuka orang lain akan membantu Anda memahami seluruh proses dari menulis kode sampai menerbitkannya.