Website HTML CSS adalah website yang dibangun langsung dengan dua bahasa dasar web: HTML untuk struktur isi dan CSS untuk tampilan. Pendekatan ini memberi kendali penuh dan merupakan fondasi bagi hampir semua teknologi web lain.
Peralatan yang dibutuhkan
- Editor teks atau editor kode, misalnya Visual Studio Code.
- Peramban untuk melihat hasil.
- Folder untuk menyimpan berkas proyek.
Struktur dasar proyek
Buat satu folder, lalu di dalamnya buat berkas index.html dan style.css. Berkas index.html adalah halaman utama yang dibuka pertama kali oleh peramban. Hubungkan berkas CSS ke HTML lewat elemen link di bagian head.
Elemen HTML yang sering dipakai
| Elemen | Fungsi |
|---|---|
| header, nav, main, footer | Membagi struktur halaman |
| h1 sampai h6 | Judul dan subjudul |
| p | Paragraf |
| a | Tautan |
| img | Gambar, wajib dengan teks alternatif |
| ul dan li | Daftar |
| form, input | Formulir |
Gaya dengan CSS
CSS mengatur warna, font, jarak, dan tata letak. Dua konsep yang perlu dipelajari lebih dulu ialah model kotak (margin, border, padding) dan tata letak modern dengan Flexbox serta Grid. Gunakan satuan relatif seperti rem dan persen agar tampilan fleksibel.
Membuat tampilan responsif
Tambahkan elemen meta viewport di bagian head agar halaman menyesuaikan lebar layar ponsel. Lalu gunakan media query untuk mengubah tata letak pada lebar tertentu. Uji dengan mengubah ukuran jendela peramban atau mode perangkat pada alat pengembang.
Mempublikasikan
Setelah selesai, unggah berkas ke layanan hosting situs statis atau hosting biasa. HTML dan CSS merupakan teknologi yang ringan dan cepat, yaitu cocok untuk profil, portofolio, dan landing page sederhana. Pedoman yang membantu ialah memeriksa tampilan di ponsel sejak awal. Baca cara hosting website untuk langkah selanjutnya. Untuk kebutuhan yang lebih kompleks atau bila Anda ingin dibuatkan, lihat katalog desain Valtef.
Pertanyaan yang sering diajukan
Perlukah belajar JavaScript?
Untuk halaman statis tidak wajib, tetapi JavaScript diperlukan untuk interaksi seperti menu, formulir dinamis, atau animasi.
Berapa lama belajar HTML CSS dasar?
Bergantung latihan. Banyak pemula dapat membuat halaman sederhana dalam beberapa minggu belajar rutin.
Apakah HTML CSS cukup untuk toko online?
Tidak. Toko online membutuhkan fitur server seperti keranjang dan pembayaran.
