Belajar HTML dan CSS Dasar: Halaman Profil Usaha 30 Menit
Ingin punya halaman web untuk usaha tanpa aplikasi berbayar? Belajar HTML dan CSS dasar sambil membuat halaman profil usaha sederhana yang rapi di ponsel.
Banyak usaha kecil hanya mengandalkan akun media sosial. Padahal halaman web sederhana bisa membuat usaha terlihat lebih tepercaya dan mudah ditemukan di Google. Kamu tidak perlu langsung belajar framework yang rumit. Cukup HTML untuk isi dan CSS untuk tampilan. Di artikel ini kita membuat halaman profil usaha sederhana dalam satu file.
Yang perlu disiapkan
- Editor teks gratis, misalnya Visual Studio Code.
- Browser seperti Chrome atau Firefox.
- Satu folder kosong, misalnya
profil-usaha.
Buat file baru bernama index.html di folder itu. Setiap kali selesai mengubah kode, simpan file lalu muat ulang browser.
Langkah 1: Kerangka HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dapur Bu Sari - Katering Rumahan di Klaten</title>
<meta name="description" content="Katering rumahan untuk arisan dan kantor di Klaten. Pesan H-2 lewat WhatsApp.">
</head>
<body>
</body>
</html>
Dua baris yang sering dilupakan pemula:
| Baris | Fungsinya |
|---|---|
meta viewport |
Membuat halaman pas di layar ponsel |
title dan meta description |
Teks yang muncul di hasil pencarian Google |
Langkah 2: Isi halaman
Tulis kode ini di antara <body> dan </body>:
<header class="hero">
<h1>Dapur Bu Sari</h1>
<p>Katering rumahan untuk arisan, pengajian, dan makan siang kantor di Klaten.</p>
<a class="tombol" href="https://wa.me/6281234567890">Pesan lewat WhatsApp</a>
</header>
<main>
<section>
<h2>Menu andalan</h2>
<ul class="menu">
<li><strong>Nasi box ayam bakar</strong> Rp25.000</li>
<li><strong>Snack box 3 kue</strong> Rp12.000</li>
<li><strong>Tumpeng mini</strong> Rp150.000</li>
</ul>
</section>
<section>
<h2>Cara pesan</h2>
<ol>
<li>Pilih menu dan jumlah porsi.</li>
<li>Kirim pesan WhatsApp paling lambat H-2.</li>
<li>Bayar DP 50%, sisanya saat pesanan diantar.</li>
</ol>
</section>
</main>
<footer>Jl. Pemuda No. 12, Klaten · Buka setiap hari 08.00–17.00</footer>
Perhatikan urutan judul: hanya satu h1 untuk nama usaha, lalu h2 untuk setiap bagian. Struktur seperti ini membantu Google memahami isi halaman.
Ganti nomor di tautan
wa.medengan nomormu, diawali 62 tanpa angka 0 di depan.
Langkah 3: Tampilan dengan CSS
Tambahkan kode ini di dalam <head>, tepat sebelum </head>:
<style>
body { margin: 0; font-family: Arial, sans-serif; color: #2b2b2b; line-height: 1.6; }
.hero { background: #7a3e1d; color: #fff; padding: 48px 20px; text-align: center; }
.hero h1 { margin: 0 0 8px; font-size: 2rem; }
.tombol { display: inline-block; margin-top: 16px; padding: 12px 22px;
background: #25d366; color: #fff; border-radius: 999px;
text-decoration: none; font-weight: bold; }
main { max-width: 640px; margin: 0 auto; padding: 24px 20px; }
.menu { list-style: none; padding: 0; }
.menu li { display: flex; justify-content: space-between;
padding: 12px 0; border-bottom: 1px solid #eee; }
footer { text-align: center; padding: 24px; font-size: 14px; color: #777; }
</style>
Penjelasan singkat bagian pentingnya:
| Kode CSS | Hasilnya |
|---|---|
max-width: 640px; margin: 0 auto; |
Isi tidak terlalu lebar di laptop dan tetap di tengah |
display: flex; justify-content: space-between; |
Nama menu di kiri, harga di kanan |
border-radius: 999px; |
Tombol berbentuk kapsul |
line-height: 1.6; |
Teks lebih lega dan nyaman dibaca |
Langkah 4: Cek di ponsel
Di Chrome, klik kanan lalu pilih Inspect, lalu klik ikon ponsel di pojok kiri atas panel. Kamu bisa melihat tampilan halaman di berbagai ukuran layar. Pastikan tidak ada teks yang terpotong dan tombol mudah ditekan dengan jempol.
Langkah berikutnya
Setelah halaman ini jadi, kamu bisa:
- Menambahkan foto produk dengan tag
<img>, lengkap dengan atributaltyang menjelaskan isi foto. - Memisahkan CSS ke file
style.cssagar kode lebih rapi. - Menambahkan bagian testimoni dan peta lokasi.
- Mengunggah halaman ke hosting agar bisa dibuka siapa saja.
Kesalahan HTML dan CSS yang sering terjadi
| Kesalahan | Akibatnya | Perbaikan |
|---|---|---|
Tag tidak ditutup, misalnya <section> tanpa </section> |
Tata letak berantakan | Pastikan setiap tag pembuka punya penutup |
Lupa meta viewport |
Halaman tampil kecil di ponsel | Tambahkan di dalam <head> |
| Gambar berukuran besar | Halaman lambat dibuka | Perkecil gambar sebelum diunggah, misalnya lebar 1200 piksel |
Lupa atribut alt pada gambar |
Google dan pembaca layar tidak tahu isi gambar | Tulis keterangan singkat, misalnya alt="Nasi box ayam bakar" |
| Warna teks terlalu pucat | Sulit dibaca di bawah sinar matahari | Pilih teks gelap di latar terang |
Visual Studio Code bisa membantu menandai tag yang belum ditutup. Biasakan juga merapikan indentasi agar struktur halaman mudah dibaca.
Ingin lebih dalam? Artikel ini baru membahas sebagian kecil. Di ebook Bikin Landing Page UMKM dengan HTML & CSS, kamu akan mempelajari lebih jauh:
- Struktur HTML dengan header, main, section, article, dan footer
- CSS untuk warna, huruf, jarak, variabel warna, dan tombol pesan WhatsApp (wa.me)
- Tata letak Flexbox untuk header dan hero, serta Grid untuk kartu produk
Semua langkahnya disusun berurutan dan bisa langsung dipraktikkan. Lihat isi bukunya.
Pertanyaan yang sering diajukan
Apakah HTML termasuk bahasa pemrograman? HTML adalah bahasa markup untuk menyusun isi halaman, bukan bahasa pemrograman. Untuk membuat halaman interaktif, kamu memerlukan JavaScript.
Apakah halaman sederhana seperti ini bisa muncul di Google? Bisa, selama halamannya sudah online, punya judul dan deskripsi yang jelas, dan didaftarkan ke Google Search Console.
Lebih baik belajar HTML dulu atau langsung pakai pembuat website? Pembuat website lebih cepat untuk sekadar online. Belajar HTML dan CSS membuatmu lebih leluasa mengubah tampilan dan tidak tergantung pada satu platform.
Kalau artikel ini membantu, langkah berikutnya ada di ebook Bikin Landing Page UMKM dengan HTML & CSS.
Pelajari sampai tuntas di “Bikin Landing Page UMKM dengan HTML & CSS”
Satu halaman web sederhana yang menjelaskan produk, harga, dan cara memesan membuat usaha terlihat jauh lebih meyakinkan. Buku ini membimbingmu membuat landing page dari file koson...
