Pada artikel ini, saya akan membagikan pengalaman saya membuat kode situs web dan Contoh Coding HTML Website Penjualan. Biasanya, membuat situs web dapat memakan waktu cukup lama, baik itu situs e-niaga, profil perusahaan, atau penyedia layanan. Jadi, bisakah kita membuat kode situs web hanya dalam 15 menit? Ya, tentu saja. Website seperti apa yang akan kita buat? Ingin tahu? Anda hanya perlu mengikuti tips dan trik ini.
Baca terus dan mari kita mulai. Sebelum kita masuk ke Contoh Coding HTML Website, mari kita mengenal HTML terlebih dahulu. Apakah Anda tahu apa itu HTML? HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan pengguna untuk membuat dan mengatur heading, paragraf, link, dan blockquote untuk halaman web. HTML sebenarnya bukan bahasa pemrograman; itu berarti HTML tidak dapat membuat fungsi dinamis. Misalnya, inilah kode atau skrip untuk membuat paragraf.
Dalam artikel ini kita akan membahas aspek-aspek dasar dari coding HTML. Karena bagaimanapun, sebelum dapat membuat sesuatu yang lebih menarik dan kompleks, seorang programmer atau developer harus menguasai dasar-dasar coding HTML terlebih dahulu.
HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website. HTML biasanya dikombinasikan dengan Javascript dan CSS yang akan membuat sebuah halaman website lebih interaktif dan dinamis.
HTML sebenarnya bukanlah bahasa pemrograman, artinya HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Contoh kode atau script membuat paragraf.
<p> Hallo sobat Dicoding apa kabarnya? Mudah-mudahan dalam keadaan sehat-sehat saja ya. Ammin </p>
Sebelum membahas tentang tag, elemen, dan atribut seperti yang telah disebutkan sebelumnya, alangkah baiknya jika kita mengenal terlebih dahulu struktur dasar dari sebuah coding.
Tag HTML adalah sebuah kode yang menandai bagian dari dokumen HTML dan menentukan bagaimana bagian tersebut akan ditampilkan oleh browser.
Berikut adalah beberapa contoh tag HTML
<html>: Tag ini menandai awal dan akhir dari sebuah dokumen HTML.
<head>: Tag ini menandai bagian dari dokumen yang berisi informasi tentang dokumen, seperti judul dokumen, metadata, dan link ke file CSS.
<title>: Tag ini menandai judul dokumen yang akan ditampilkan di tab browser.
<body>: Tag ini menandai bagian dari dokumen yang akan ditampilkan kepada pengunjung website.
<h1>: Tag ini menandai judul terbesar dalam dokumen HTML. Tag <h2>, <h3>, dan seterusnya, juga tersedia untuk menandai judul dengan ukuran yang lebih kecil.
<p>: Tag ini menandai paragraf teks dalam dokumen HTML.
<a>: Tag ini menandai sebuah tautan (link) ke halaman web lain atau ke bagian lain dari halaman web yang sama.
<img>: Tag ini menandai sebuah gambar yang akan ditampilkan dalam dokumen HTML.Elemen HTML adalah bagian dari dokumen HTML yang ditandai dengan tag HTML dan menyatakan fungsinya dalam membangun struktur dan tampilan dari halaman web.
Setiap elemen HTML terdiri dari tag pembuka (opening tag), isi elemen, dan tag penutup (closing tag). Misalnya, elemen <p> (paragraf) dapat digunakan seperti ini:
Ini adalah paragraf pertama pada halaman web ini.
<p>Ini adalah paragraf pertama pada halaman web ini.</p>
Di atas adalah contoh dasar dari sebuah website penjualan yang menampilkan informasi tentang toko, produk terbaru yang dijual, cara pembayaran, dan lokasi toko. Anda dapat menambahkan fitur-fitur lain sesuai kebutuhan, seperti halaman produk yang terperinci, sistem pemesanan, dan lain-lain.
Berikut adalah contoh coding HTML untuk website penjualan yang sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Toko Kami</title>
</head>
<body>
<h1>Toko Kami</h1>
<p>Selamat datang di toko kami! Kami menjual berbagai macam produk berkualitas dengan harga yang terjangkau.</p>
<h2>Produk Terbaru</h2>
<ul>
<li>Sepatu Sneakers - Rp 200.000</li>
<li>Jam Tangan - Rp 300.000</li>
<li>Tas Wanita - Rp 400.000</li>
</ul>
<h2>Cara Pembayaran</h2>
<p>Kami menerima pembayaran melalui transfer bank dan pembayaran langsung di toko kami.</p>
<h2>Lokasi Toko</h2>
<p>Anda bisa menemukan toko kami di Jalan Raya No. 123, Kota Bandung.</p>
</body>
</html>
Berikut adalah contoh coding HTML untuk website penjualan yang lebih lengkap, dengan fitur-fitur seperti halaman produk yang terperinci, form pemesanan, dan sistem pembayaran online:
<!DOCTYPE html>
<html>
<head>
<title>Toko Kami - Jual Berbagai Macam Produk Berkualitas</title>
</head>
<body>
<header>
<h1>Toko Kami</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#produk">Produk</a></li>
<li><a href="#cara-pesan">Cara Pesan</a></li>
<li><a href="#pembayaran">Pembayaran</a></li>
<li><a href="#lokasi">Lokasi</a></li>
</ul>
</nav>
</header>
<main>
<section id="beranda">
<h2>Selamat datang di toko kami!</h2>
<p>Kami menjual berbagai macam produk berkualitas dengan harga yang terjangkau. Anda bisa menemukan produk-produk terbaru kami di halaman produk.</p>
</section>
<section id="produk">
<h2>Produk</h2>
<div class="produk">
<img src="sepatu-sneakers.jpg" alt="Sepatu Sneakers">
<h3>Sepatu Sneakers</h3>
<p>Rp 200.000</p>
<a href="#form-pesan">Pesan Sekarang</a>
</div>
<div class="produk">
<img src="jam-tangan.jpg" alt="Jam Tangan">
<h3>Jam Tangan</h3>
<p>Rp 300.000</p>
<a href="#form-pesan">Pesan Sekarang</a>
</div>
<div class="produk">
<img src="tas-wanita.jpg" alt="Tas Wanita">
<h3>Tas Wanita</h3>
<p>Rp 400.000</p>
<a href="#form-pesan">Pesan Sekarang</a>
</div>
</section>
<section id="form-pesan">
<h2>Form Pemesanan</h2>
<form action="/pesan" method="post">
<label for="nama">Nama
Secara keseluruhan, pengkodean situs web HTML tidaklah sulit. Namun, ada beberapa hal yang perlu diingat, seperti penggunaan tag dan atribut yang benar.
