Contoh Coding HTML Website Penjualan, Pemula Mudah Paham!

Digital Anchor

•

07 Jul 2025

10 Dec 2024

•

Enterprise

Table of Contents

Punya produk dan ingin menjualnya secara online? Buat saja situs web penjualan sendiri!

Website penjualan yang dikembangkan secara mandiri bisa memberikan banyak keuntungan. Mulai dari kemudahan kustomisasi dan kontrol, hemat bujet secara jangka panjang, kepemilikan data dan kendali keamanan sepenuhnya, hingga membedakan bisnis Anda dari para kompetitor.

Ketika merancang situs web, tak terkecuali website penjualan, HTML sangat umum digunakan. Coding HTML bisa dilakukan sesederhana hingga serumit mungkin.

Nah, jika Anda belum berpengalaman dalam membuat situs web penjualan sendiri, cukup pelajari penjelasan dan contoh coding HTML website penjualan berikut!

Sekilas tentang HTML

High angle view of developer sitting at table in front of computer monitor and typing security codes for software

Pengertian HTML

Apakah Anda tau apa itu HTML? HTML (HyperText Markup Language) merupakan bahasa markah standar yang dapat menjelaskan struktur dari sebuah konten. HTML tercipta dari penggabungan bahasa markup dan hypertext.

Markup mendefinisikan dokumen teks dalam tag untuk menyusun halaman web, sedangkan hypertext menegaskan hubungan antar halaman web.

HTML berguna untuk menganotasi teks sehingga mesin bisa memahami dan memanipulasi konten di dalamnya. Selain bisa dipahami oleh mesin, HTML juga dapat dibaca oleh manusia dan memakai tag untuk memberi perintah manipulasi yang harus dilakukan pada teks.

HTML terdiri atas berbagai macam elemen dan tag. Kedua komponen inilah yang berperan besar dalam pembuatan situs web.

Elemen HTML

Elemen HTML biasanya terdiri atas tag awal, konten, dan tag akhir. Berikut contohnya:

<nama tag> taruh konten di sini </nama tag>

Meski begitu, sebagian elemen HTML tidak memiliki konten, seperti elemen <br>. Elemen seperti ini dinamakan sebagai elemen kosong. Elemen kosong tak mempunyai tag akhir.

Terdapat dua macam elemen HTML yang paling banyak digunakan dalam pembuatan situs web, yakni sebagai berikut:

Elemen Block-Level

Jenis elemen ini menggunakan keseluruhan halaman dan membagi setiap elemen dengan garis. Elemen block-level biasanya menyertakan sejumlah tag, seperti <html>, <head>, <body>, <h1> sampai <h6>, <p>, <ol>, dan <li>.

Elemen Inline

Elemen inline menerapkan format pada konten-konten di dalam elemen block-level. Misalnya, menonjolkan teks atau menambahkan tautan.

Jenis elemen ini sering dipakai karena bisa memformat teks tanpa merusak alur konten. Elemen inline sering menggunakan beberapa tag penting, seperti <strong>, <em>, dan <a>.

Tag HTML

Tag HTML adalah komponen HTML yang terdiri atas tanda “<” dan “>”. Setidaknya, ada 142 tag yang bisa digunakan untuk membuat beragam elemen.

Apakah Anda harus menghafal seluruh tag yang ada? Tentu saja tidak wajib. Sebagian tag bahkan tidak lagi didukung oleh browser modern yang umum dipakai pengguna internet. Jadi, Anda bisa mempelajari beberapa tag yang paling sering dipakai sebagai berikut!

<html> — Dasar dari dokumen HTML yang menentukannya sebagai HTML.
<head> — Tag yang berisi kepala elemen, seperti judul, gaya, atau meta tag dalam dokumen HTML.
<title> — Tag yang mendefinisikan judul dari sebuah berkas HTML.
<body> — Tag yang menjelaskan badan dari dokumen HTML. Biasanya berisi konten-konten seperti gambar, daftar, atau tabel.
<p> — Tag untuk paragraf.
<div> — Tag yang menerangkan pembagian konten dalam sebuah berkas HTML.
<img> — Tag untuk menyematkan gambar.
<a> — Tag untuk menjelaskan hyperlink.
<ol> — Tag yang menerangkan daftar berurutan.
<ul> — Tag untuk daftar yang tak berurutan.
<li> — Tag untuk mendefinisikan item dalam daftar.
<button> — Tag untuk menciptakan tombol yang dapat diklik.
<label> — Tag yang menegaskan label untuk elemen input.
<iframe> —Tag yang menyematkan bingkai inline untuk konten eksternal.
<h1> sampai <h6> — Tag yang menegaskan heading dengan level yang berbeda-beda.
<table> — Tag untuk membuat tabel.
<tr> — Tag yang menerangkan baris tabel.
<th> — Tag yang menjelaskan sel header dari tabel.
<td> — Tag untuk menegaskan sel data dalam tabel.
<form> — Tag nan menjelaskan sebuah formulir HTML untuk kebutuhan input pengguna.
<input> — Tag yang menegaskan kontrol input dalam sebuah formulir.
<span> — Tag untuk membuat container inline biasa.
<br> — Tag kosong untuk membuat jeda baris tanpa memulai paragraf baru.

**Hal-Hal yang Perlu Diperhatikan Saat Coding HTML Website Penjualan**

Pembuatan situs web penjualan memerlukan ketelitian yang tinggi dan tidak bisa dilakukan tanpa perencanaan. Agar hasilnya maksimal, jangan lupa perhatikan hal-hal berikut saat coding HTML situs web penjualan!

**Struktur Dasar Coding HTML Website Penjualan**

Pertama-tama, Anda harus mempersiapkan struktur dasar coding HTML untuk situs web penjualan terlebih dahulu. Struktur dasar yang dimaksud dapat berupa teks, gambar, suara, atau video yang akan mengoptimalkan situs web Anda.

Sebagai contoh, jika Anda berencana membuat situs web untuk bisnis pakaian pria modern, siapkan konten-konten yang akan dimasukkan ke dalam HTML. Misalnya, teks promosi produk, video tutorial penggunaan atau perawatan produk, serta gambar-gambar untuk katalog produk.

Tata Letak yang User-Friendly

Tata letak yang user-friendly artinya mudah diakses oleh siapa pun, baik orang yang awam maupun orang yang mahir di bidang teknologi. Tata letak seperti ini meningkatkan pengalaman pengguna sekaligus memudahkan mereka menelusuri bisnis Anda.

Apakah ada tips untuk membuat tata letak user-friendly dengan HTML? Tentu saja ada!

Pertama-tama, Anda harus mengoptimalkan navigasi situs web.

Beberapa caranya adalah dengan menggunakan struktur menu yang logis, teratur, dan mudah dipahami; membatasi jumlah item pada menu agar pengguna tidak pusing atau bingung; atau menggunakan navigasi tempel seperlunya nan bisa terlihat selama pengguna menggulir halaman situs web.

Selanjutnya, buat tata letak yang konsisten dan kohesif saat coding HTML. Tips ini akan membuat pengguna lebih mudah dalam navigasi dan memahami struktur situs web.

Utamakan pula tata letak yang simpel dan tidak memuat terlalu banyak elemen. Hal ini berguna agar situs web bisa loading lebih cepat sehingga pengguna lebih nyaman selama kunjungan.

Halaman Katalog Produk yang Menarik

Katalog produk adalah salah satu metode pemasaran jitu yang tak boleh Anda abaikan. Ketika pelanggan menelusuri katalog produk dengan desain menarik, kemungkinan besar mereka akan berminat membeli di toko Anda.

Apa saja tips untuk membuat katalog produk yang menarik dengan HTML? Pertama-tama, Anda bisa mempersiapkan foto-foto produk berkualitas tinggi. Kemudian, masukkan ke dalam berkas HTML dan sisipkan teks yang singkat, informatif, dan relevan.

Tambahkan elemen-elemen HTML interaktif pada katalog. Contohnya, tombol wishlist atau favorit, kolom jumlah produk dan tombol tambah produk ke keranjang, serta tombol pembelian instan yang langsung mengarah ke halaman checkout.

Anda juga bisa menambahkan fitur sortir atau kolom penelusuran pada katalog. Kedua elemen ini dapat membantu pelanggan yang ingin mencari produk berdasarkan kategori atau kata kunci.

Selanjutnya, jangan lupa rancang katalog yang bisa diperbarui secara otomatis dan real-time. Hal ini akan membantu pelanggan mendapatkan informasi, promosi, dan harga produk yang up-to-date.

Optimisasi Website untuk Perangkat Mobile

Kenapa optimisasi situs web untuk mobile penting? Dilansir oleh Exploding Topics, total pengguna ponsel pintar di dunia pada 2024 mencapai 7,211 miliar. Jumlah ini meningkat sebanyak 3,4% dibandingkan tahun sebelumnya, yang mencapai 6,974 miliar.

Di Indonesia sendiri, total pengguna ponsel pintar tembus ke angka 187,7 juta, atau 68,1% dari jumlah populasi (275,5 juta).

Artinya, potensi pengguna internet untuk mengakses situs web Anda dengan perangkat mobile sangatlah besar. Jadi, saat coding HTML untuk situs web penjualan, Anda perlu benar-benar memastikan bahwa website bisa loading cepat, memiliki tata letak yang rapi, dan responsif di perangkat mobile.

Bagaimana caranya? Anda dapat mengetes situs web dengan tools Google yang ramah untuk perangkat mobile, menggunakan tema, plugin, dan CSS custom untuk membuat situs lebih responsif di mobile, serta mendesain ulang pop-up khusus mobile.

Keamanan Situs Web Penjualan

Selama merancang situs web dengan HTML, pastikan untuk memperhatikan tingkat keamanannya pula.

Beberapa hal yang bisa Anda lakukan untuk melindungi website dari serangan cyber, antara lain, memakai protokol HTTPS dan SSL untuk mengenkripsi data, memindai situs web secara berkala, memperbarui plugin keamanan, serta mem-backup data secara rutin.

Penerapan CSS untuk Memperindah Tampilan Situs Web

Situs web HTML tanpa CSS (Cascading Style Sheets) hanyalah struktur situs yang membosankan untuk dilihat. Dengan penerapan CSS, website HTML akan lebih fleksibel, mudah diskustomisasi, praktis diakses, serta lebih hemat bandwidth.

Bagaimana cara menghubungkan CSS dengan HTML? Anda bisa menyisipkan berkas CSS di awal dokumen HTML, mengintegrasikan CSS dengan berkas eksternal, atau menyertakan CSS dengan metode gaya inline.

Integrasi Keranjang Belanja dan Halaman Checkout

Keranjang belanja dan halaman checkout adalah elemen krusial dalam situs web penjualan. Jika tidak dirancang dengan tepat, keduanya bisa menimbulkan kerugian bagi penjual maupun pembeli.

Contohnya, ketika pelanggan memasukkan 1 produk ke keranjang belanja, lalu halaman checkout malah menampilkan 2 produk, tentu hal ini mengurangi kenyamanan pelanggan.

Oleh karena itu, Anda perlu menyusun template HTML untuk keranjang belanja dengan elemen-elemen fungsional. Kemudian, tes performa keranjang belanja di berbagai browser dan perangkat.

Selanjutnya, agar integrasi keranjang belanja dan halaman checkout lebih praktis, Anda bisa menggunakan DOKU Checkout dan Direct API.

DOKU Checkout cocok untuk pebisnis yang mempunyai tim TI terbatas dan dapat dikustomisasi dengan tampilan-tampilan nan telah disediakan. Sementara itu, Direct API dapat dipakai untuk mengontrol pengalaman pembayaran pelanggan.

**Penambahan Fitur Live Chat untuk Mengoptimalkan Penjualan**

Fitur live chat menawarkan banyak manfaat bagi pelanggan maupun situs web penjualan. Mulai dari meningkatkan pengalaman terpersonalisasi bagi pelanggan, menunjang keperluan pelanggan selama 24/7, memberikan dukungan proaktif, serta meningkatkan pemasaran dan penjualan.

Untuk menambahkan fitur live chat, Anda harus memilih platform penyedianya terlebih dahulu. Setelah itu, daftarkan bisnis Anda. Kelola hal-hal penting seperti integrasi dengan email, media sosial, dan messenger, respons otomatis, waktu operasional, serta desain antarmuka.

Selanjutnya, Anda bisa menyalin kode JavaScript dari platform live chat dan menempelkannya ke situs web. Terakhir, tinggal lakukan kustomisasi lanjutan dan tes kinerja fiturnya.

**Contoh Coding HTML Website Penjualan**

Berikut adalah beberapa contoh coding HTML yang bisa Anda terapkan dalam situs web penjualan.

Contoh 1: Header

Contoh coding HTML berikut menampilkan 3 tombol navigasi (Beranda, Tentang, dan Kontak), teks promosi, dan tombol pembelian pada header.

<nav>

<ul>

<li><a href="">BERANDA</a></li>

<li><a href="">TENTANG</a></li>

<li><a href="">KONTAK</a></li>

</ul>

</nav>

<div>

<h1>DAPATKAN OLIVE SCARF</h1>

<h2>

DISKON HINGGA</br>

KHUSUS <br />

RAMADAN DAN IDULFITRI

</h2>

<h3>Mulai 11 Maret sampai 11 April 2024</h3>

<a href="#">BELANJA SEKARANG</a>

</div>

</header>

Contoh 2: Body

Bagian body situs web bisnis bisa diisi dengan bermacam-macam hal yang dapat menarik perhatian pelanggan. Misalnya, keuntungan berbelanja di toko Anda, katalog produk, testimoni pembeli, atau video sematan.

Anda bisa melihat beberapa contoh coding HTML berikut untuk mengisi body situs web penjualan!

Contoh Coding HTML Bagian Keuntungan Berbelanja di Toko

Berikut adalah contoh coding HTML yang menampilkan tiga keuntungan nan pelanggan dapatkan bila berbelanja di situs web Anda.

<div>

<h4>Gratis Ongkir</h4>

<span>Minimum belanja Rp200 ribu.</span>

</div>

<div>

<h4>Pengemasan Ramah Lingkungan</h4>

<span>Produk kami dikemas menggunakan material yang bisa didaur ulang.</span>

</div>

<div>

<h4>Perawatan Mudah</h4>

<span>Produk kami menggunakan bahan yang mudah dirawat dan tidak perlu disetrika.</span>

</div>

</section>

Contoh Coding HTML Katalog Produk

Untuk bagian katalog, Anda bisa menampilkan nama, bintang, dan harga produk menggunakan coding HTML. Cek contoh berikut.

<div>

</div>

<p>Olive Scarf</p>

<div>

<i></i>

</div>

</div>

Contoh Coding HTML Testimoni Pembeli

Ikuti contoh coding HTML simpel berikut untuk menampilkan testimoni produk yang dibeli oleh pelanggan.

<div>

<p><span>Kinan Rachmayanti</span> @kinan.rachma33</p>

<p>Kainnya lembut dan adem. Cocok untuk iklim tropis. Harganya memang tidak semurah produk-produk umum di pasaran. Tapi, ada harga, ada kualitas!</p>

</div>

<div>

<p><span >Nanda Amirah</span> Beauty Influencer</p>

<p>Nyaman banget dipakai! Kualitas hijab di sini memang nggak kaleng-kaleng deh!</p>

</div>

Contoh Coding HTML Video Sematan

Inilah contoh coding HTML video sematan yang dapat meningkatkan minat belanja pelanggan.

<!DOCTYPE html>

<html>

<head>

<title>HTML Video embed</title>

</head>

<body>

<p>Whimsical Forest Tea Party</p>

<br />

</iframe>

</body>

</html>

Contoh 3: Footer

Inilah contoh footer yang menampilkan beberapa navigasi dan tombol media sosial.

<div>

<ul>

<li><a href="">BERANDA</a></li>

<li><a href="">TENTANG</a></li>

<li><a href="">KONTAK</a></li>

</ul>

<div>

</div>

</section>

Dengan mempelajari penjelasan dan contoh coding HTML website penjualan di atas, Anda bisa membuat situs web bisnis sendiri dengan cepat dan mudah.

Untuk mengoptimalkan performa website penjualan, Anda dapat andalkan layanan Accept Payments persembahan dari DOKU. Accept Payments menyediakan produk Checkout dan Direct API yang bisa dipasang di website penjualan untuk memperlancar proses pembayaran.

Layanan Accept Payments menawarkan banyak manfaat, mulai dari manajemen risiko dan penipuan yang canggih, pelaporan transaksi nan detail, hingga pengelolaan penjualan yang fleksibel.

Bukan itu saja, DOKU sebagai penyedia Accept Payments telah berpengalaman melayani lebih dari 360 juta transaksi sejak didirikan pada 2007.

Bagaimana? Tertarik dengan layanan Accept Payments dari DOKU? Klik di sini untuk info lebih lanjut!