Cara Membuat Website Toko Alat Tulis dengan HTML dan CSS

By Posted on

Cara Membuat Website Toko Alat Tulis dengan HTML dan CSS – Apakah Anda ingin memulai bisnis online Anda sendiri tetapi tidak yakin dari mana harus memulainya? Jika Anda memiliki minat dalam penjualan alat tulis dan ingin mencoba peruntungannya di dunia online, maka Anda berada di tempat yang tepat! Dalam panduan ini, haikalweb akan membimbing Anda langkah demi langkah dalam membuat sebuah website toko alat tulis menggunakan HTML dan CSS, tanpa memerlukan pengalaman teknis yang mendalam. Siapkan diri Anda untuk mempelajari cara membuat tampilan yang unik, menarik, dan profesional untuk toko online Anda dalam waktu singkat. Ayo mulai!

Alat yang Harus di Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat website toko alat tulis dengan html dan css:

  • Perangkat laptop,
  • Web browser (disarankan menggunakan Chrome),
  • Text editor code (Sublime text),
  • Niat yang kuat .

Cara Membuat Website Toko Alat Tulis dengan HTML dan CSS

1. Buat Folder Project Website Toko Alat Tulis

Langkah pertama yang perlu Anda lakukan adalah membuat folder untuk proyek website toko alat tulis Anda. Ini akan membantu Anda mengatur semua file yang terkait dengan proyek Anda dengan baik.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda. Download gambar disini untuk dapat di terapkan pada website toko alat tulis Anda.

3. Buat Sebuah File website_toko_alat_tulis.html

Sekarang, mari kita mulai dengan membuat file HTML untuk website Anda. Gunakan editor teks favorit Anda dan buatlah file baru dengan nama “website_toko_alat_tulis.html“.

Artikel Terkait:  Cara Membuat Website Pariwisata dengan HTML dan CSS

Dalam file ini, Anda akan menulis struktur dasar HTML, termasuk elemen-elemen seperti <html>, <head>, <title>, dan <body>. Pastikan untuk menyertakan placeholder untuk konten seperti header, navigasi, dan daftar produk.

Berikut ini file html yang harus Anda tambahkan ke dalam project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toko Alat Tulis</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Toko Alat Tulis</h1>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Produk</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>
    
    <section class="produk">
        <div class="produk-item">
            <img src="img/pens.jpg" alt="Pens">
            <h2>Pens</h2>
            <p>Harga: $5</p>
            <a href="#">Beli Sekarang</a>
        </div>
        <div class="produk-item">
            <img src="img/notebooks.jpg" alt="Notebooks">
            <h2>Notebooks</h2>
            <p>Harga: $10</p>
            <a href="#">Beli Sekarang</a>
        </div>
    </section>

    <footer>
        <p>Hak Cipta &copy; 2024 Toko Alat Tulis</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, mari kita buat file CSS untuk mengatur tata letak dan gaya website Anda. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda.

Artikel Terkait:  Cara Membuat Website Makanan dengan HTML dan CSS

Anda dapat mulai dengan menentukan gaya dasar untuk elemen-elemen HTML seperti body, header, navigasi, dll. Selanjutnya, tambahkan gaya untuk produk, tombol, dan elemen lain yang akan ada di website Anda.

Berikut ini file css yang harus Anda tambahkan ke dalam project:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.produk {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.produk-item {
    text-align: center;
    margin: 0 20px;
}

.produk-item img {
    width: 200px;
    height: 200px;
    border-radius: 10px;
}

.produk-item h2 {
    margin-top: 10px;
}

.produk-item p {
    font-style: italic;
    color: #888;
}

.produk-item a {
    display: block;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
}

.produk-item a:hover {
    background-color: #555;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}
 

5. Mengubah Produk Toko Alat Tulis

Sekarang saatnya untuk menambahkan produk ke dalam toko alat tulis Anda. Anda dapat menggunakan gambar dan deskripsi produk yang relevan untuk membuatnya menarik bagi pengunjung website Anda.

Tambahkan markup HTML untuk setiap produk di dalam file website_toko_alat_tulis.html Anda. Gunakan tag seperti <div> dan <img> untuk menampilkan gambar produk, dan <p> untuk deskripsi singkat.

Pastikan juga untuk menyertakan tombol atau tautan yang mengarahkan pengguna ke halaman pembelian produk.

6. Save & View Tampilan

Setelah Anda selesai menulis kode HTML dan CSS untuk website toko alat tulis Anda, simpan semua perubahan yang Anda buat. Kemudian, buka file “website_toko_alat_tulis.html” di browser web Anda untuk melihat tampilannya.

Artikel Terkait:  Cara Membuat Website Portal Berita dengan HTML dan CSS

Pastikan bahwa desainnya responsif dan produk ditampilkan dengan baik. Anda mungkin perlu menyesuaikan beberapa gaya CSS Anda untuk memastikan tampilan yang optimal di berbagai perangkat.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat website toko alat tulis menggunakan HTML dan CSS. Selamat mencoba dan semoga sukses dalam bisnis online Anda!

Related posts: