Kamis, 19 Mei 2022

Contoh Pembuatan Web Penjualan Buku




 Baiklah disini saya akan membagikan cara membuat web online shop.Disini saya akan menggunakan bahasa program yang mudh dipahami teman teman ketika ingin membuat online shop.

Berikut adalah cara bagaimana membuat halaman awal untuk tampilan yang akan di buat ketika kamu membuat web online shop


<html>

<head>

<title> HAN STORE BOOK="100%" onmouseout="this.start"()" onmouseover="this.stop()" scrollamount="5" width="100%"</title>

<style>

body{

background-image: url(a.jpg);

background-size: cover;

background-attachment: fixed;

}

h1{

color: white;

text-align: center;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #FFE4B5;

}

li {

float: left;

}

li a{

display: block;

color: #8B4513;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.yuhu){

background: #111;

}

.ha {

width: 1350px;

border: 1px;

color: white;

float: left;

background-color: gray;

}


.buku {

    padding: 0 0px;

    margin-right: 20px;

    float: left;

    border:1px solid #dedede;

    width: 200;

    background-color:white;

}

.foto img {

    padding:5px 0 5px 0;

    width: 100%;

    height: 250px;

}


.judul {

    font-size: 13px;

    font-weight: 600;

    padding:0 0 3px 0;

    text-align: center;

} 

</style>


</head>

<body>

<h1>SELAMAT DATANG DAN SELAMAT BERBELANJA</h1>

<h4 align="center"> "Toko Buku Han Store"</h4>

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="profil.html">Profil</a></li>

<li><a href="login.html">Login</a></li>

<li><a href="buku.html">Daftar Buku</a></li>

<li><a href="kontak.html">Kontak</a></li>

<li><a href="about.html">About</a></li>

<li><a href="logout.html">Logout</a></li>

</ul>

<h2 align="center">TOKO BUKU HAN STORE</h2>

<br>

<p align="center"><img src="b.jpg" width="150"></p>

<br>

<div class="ha">

<p><a href="Han store.html">Han Store.com</a> merupakan sebuah toko buku berbasis online yang memudahkan konsumen mencari buku yang mereka mau dari smartphone/laptop mereka. Ada berbagai macam keuntungan berbelanja di <a href=" Han store.html">Han store.com</a> dengan kualitas buku 100% original.

</div>

<br> <br><br>

<div align="center">

</div>

<h2 align="center">DAFTAR BUKU</h2>

<div align="center">

</div>

<br>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Toko Online</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="Description" lang="en" content="">

<link rel="stylesheet" href="style.css">

 

Dan selanjutnya masukan daftar buku yang akan di buat, dan inilah script nya

</div>

<!-- features -->

<div class="row row--white row--padding-wide features">

<div class="row container-medium">

<div class="row features__row">

<div class="col-narrow--right features__bike">

</div>

<div class="col-wide">

<h2 class="features__heading">

INFORMATIKA

</h2>

   

       

       <img src="Buku 1.jpg" width="100" height="100"><br>

            <p>Dengan Harga Rp.120.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p><br>

        <button class="button2 center"><span><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-x/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

PENGANTAR TEKNOLOGI INFORMATIKA

</h2>

<img src="Buku 2.jpg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.300.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

Statistika Terapan Informatika

</h2>

<img src="Buku 3.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="https://www.bukukita.com/Buku-Teks/Statistik/141698-Statistika:-Terapannya-di-Informatika.html"><span>Beli!</span></button></a><br><br>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

APLIKASI KOMPUTER

</h2>

<img src="Buku 4.jpg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.250.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

INFORMATIKA 2

</h2>

<img src="Buku 5.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-viii-2/"><span>Beli!</span></button></a><br><br>

</div>

</div>

</div>

</div>


</div>

</body>

</html>


<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Toko Online</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="Description" lang="en" content="">

<link rel="stylesheet" href="style.css">

 


</section>

</div>

<!-- features -->

<div class="row row--white row--padding-wide features">

<div class="row container-medium">

<div class="row features__row">

<div class="col-narrow--right features__bike">

</div>

<div class="col-wide">

<h2 class="features__heading">

AKUNTANSI KEUANGAN

</h2>

   

       

       <img src="Buku 1.jpg" width="100" height="100"><br>

            <p>Dengan Harga Rp.120.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p><br>

        <button class="button2 center"><span><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-x/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

DASAR DASAR MANAJEMEN KEUANGAN

</h2>

<img src="Buku 2.jpg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.300.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

ANALISIS LAPORAN KEUANGAN

</h2>

<img src="Buku 3.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="https://www.bukukita.com/Buku-Teks/Statistik/141698-Statistika:-Terapannya-di-Informatika.html"><span>Beli!</span></button></a><br><br>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

MANAJEMEN KEUANGAN

</h2>

<img src="Buku 4.jpg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.250.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

KEUANGAN DESA

</h2>

<img src="Buku 5.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-viii-2/"><span>Beli!</span></button></a><br><br>

</div>

</div>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Toko Online</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="Description" lang="en" content="">

<link rel="stylesheet" href="style.css">

</div>

<!-- features -->

<div class="row row--white row--padding-wide features">

<div class="row container-medium">

<div class="row features__row">

<div class="col-narrow--right features__bike">

</div>

<div class="col-wide">

<h2 class="features__heading">

PARIWISATA CERDAS

</h2>

   

       

       <img src="Buku 1.jpg" width="100" height="100"><br>

            <p>Dengan Harga Rp.120.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p><br>

        <button class="button2 center"><span><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-x/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

PARIWISATA INDONESIA

</h2>

<img src="Buku 2.jpg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.300.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

GEOGRAFI PARIWISATA

</h2>

<img src="Buku 3.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="https://www.bukukita.com/Buku-Teks/Statistik/141698-Statistika:-Terapannya-di-Informatika.html"><span>Beli!</span></button></a><br><br>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

FILSAFAT PARIWISATA

</h2>

<img src="Buku 4.jpg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.250.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

SEJARAH PARIWISATA

</h2>

<img src="Buku 5.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-viii-2/"><span>Beli!</span></button></a><br><br>

</div>

</h1>

   

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Toko Online</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="Description" lang="en" content="">

<link rel="stylesheet" href="style.css">

</section>

</div>

<!-- features -->

<div class="row row--white row--padding-wide features">

<div class="row container-medium">

<div class="row features__row">

<div class="col-narrow--right features__bike">

</div>

<div class="col-wide">

<h2 class="features__heading">

MANAJEMEN PEMASARAN

</h2>

   

       

       <img src="Buku 2 .jpg" width="100" height="100"><br>

            <p>Dengan Harga Rp.120.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p><br>

        <button class="button2 center"><span><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-x/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

STRATEGI PEMASARAN

</h2>

<img src="Buku 1.jpg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.300.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

PEMASARAN JASA

</h2>

<img src="Buku 3.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="https://www.bukukita.com/Buku-Teks/Statistik/141698-Statistika:-Terapannya-di-Informatika.html"><span>Beli!</span></button></a><br><br>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

PEMASARAN DESTINASI

</h2>

<img src="Buku 4.jpeg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.250.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

DASAR PEMASARAN

</h2>

<img src="Buku 5.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-viii-2/"><span>Beli!</span></button></a><br><br>

</div>

/h1>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Toko Online</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="Description" lang="en" content="">

<link rel="stylesheet" href="style.css">

   

</section>

</div>

<!-- features -->

<div class="row row--white row--padding-wide features">

<div class="row container-medium">

<div class="row features__row">

<div class="col-narrow--right features__bike">

</div>

<div class="col-wide">

<h2 class="features__heading">

MANAJEMEN PERKANTORAN

</h2>

   

       

       <img src="Buku 1.jpg" width="100" height="100"><br>

            <p>Dengan Harga Rp.120.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p><br>

        <button class="button2 center"><span><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-x/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

TEKNOLOGI PERKANTORAN

</h2>

<img src="Buku 2.jpg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.300.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

PENGANTAR ADMINISTRASI PERKANTORAN

</h2>

<img src="Buku 3.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="https://www.bukukita.com/Buku-Teks/Statistik/141698-Statistika:-Terapannya-di-Informatika.html"><span>Beli!</span></button></a><br><br>

</div>

<div class="row features__row">

<div class="col-narrow features__phone">

</div>

<div class="col-wide--right features__padding">

<h2 class="features__heading">

KESEKSRETARISAN MODERN

</h2>

<img src="Buku 4.jpg" width="100" height="100"><br>

        <p>

    Dengan Harga Rp.250.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.

        </p><br>

        <button class="button2 center"><span><a href="https://penerbitbukudeepublish.com/rekomendasi-buku-teknik-informatika/">Beli!</span></button></a><br>

</div>

<div class="row features__row">

<div class="col-narrow--right features__safe">

</div>

<div class="col-wide">

<h2 class="features__heading">

DASAR AKUNTANSI PERKANTORAN </h2>

<img src="Buku 5.jpg" width="100" height="100"><br>

        <p class="features">Dengan Harga Rp.150.000 dengan kualitas bagus garansi 1 tahun. jangan lewatkan kesempatan anda untuk memiliki Buku ini untuk belajar anda.</p>

        <br>

        <button class="button2 center"><a href="http://grafindo.co.id/produk/e-book-informatika-kelas-viii-2/"><span>Beli!</span></button></a><br><br>

</div>

</div>

</div>

</div>

</div>

Di dalam itu, kita sudah membuat script perjurusan nya dan masukan nama filenya ke <a href=(nama filenya)

Kalau mau menambahkan hak milik di paling bawah web:

<!-- footer -->

<div class="row row--dark-grey row--padding-narrow">

<footer class="row container-wide">

<div class="col-wide">

      <p class="features_text">Han ozkan.blogspot.com</p>

</div>

</footer>

</div>

</body>

</html>






di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Cara mengubah isi tabel database menggunakan command promt

 Untuk mengubah isi tabel database ,anda harus membuat tabel database nya terlebih dahulu.baca  https://hanozkan.blogspot.com/2022/07/belaja...

  • Apa itu XAMPP ? Dan Apa itu PHP?
    Apa Itu XAMPP   XAMPP adalah perangkat lunak berbasis web server yang bersifat bebas. XAMPP merupakan tool yang menyediakan paket perangkat ...