Membuat tampilan halaman kategori barang sederhana (HTML & CSS)

by agungekkasmkbantaraDesember 21, 20180 Comments
 Jum'at, 21 Desember 2018

Membuat halaman kategori barang sederhana

1.Pendahuluan
Hallo, Assalamualaikum Warahmatullahi Wabarakatuh.
Hai,Sobat IT jumpa lagi bersama saya . Kali ini kita akan mmbahas mengenai pengkategorian barang dalam pembuatan halaman web penjualan.
A.Pokok Bahasan
Membuat tampilan halaman  kategori barang sederhana (HTML & CSS)
B.Latar Belakang 
Karena sulitnya pencarian barang yang diauibatkan oleh tertumpuk dan tercampurnya daftar sutu barang dalam satu tempat tanpa terkondisikan.
C.Tujuan
Mengelompokkan secara mudah  dan teratur tentang barang yang akan dicari oleh pembeli pada suatu Supermarket.
2.Isi
D.Pembahasan
Untuk pembuatan sebuah pengkategorian barang kali ini kita menggunakan bahasa markah yakni HTML & CSS, Nah untuk selanjutnya nanti kita baru mengkaitkannya menggunakan bahasa pemrograman PHP.Ok, langsung lanjut saja ke topik bahasan kita.
Untuk membuat halaman pengkategorian ini sebenarnya hampir mirip ketika kita menggunaka tag label, bedanya nantinya kita menggabungkannya dengan bahasa pemrograman PHP. Dalam tahap ini kita hanya buat header dan labelnya saja.
1.Pertama kita buat tampilan headernya terlebih dahulu, baru nanti masuk ke bagian labelnya. Sebenarnya pembuatan ini belum selesai karena siang tadi melakukan pematangan tahapan pengerjaan mengenai ISS (Item System Search) atau sistem pencarian barang.Jadi ya, demikian dulu , beso akan saya lanjutkan mengenai penerusannya.


2. Nah, bisa kalian lihat sendiri ada seperti kotak dan bulatan berwarna magenta yang berada disamping label,  itu sebenarnya hanyalah sebuah list yang saya gunakan untuk membuat hal tersebut, nantinya jikalau kalian arahkan pointer kalian kearah blok kotak tersebut, blk kotak tersebut akan berputar dan berubah menjadi bulat/lingkaran , hal ini karena saya menggunakan :hover juga border-radius untuk pembuatan hal blok berwarna magenta tersebut.











 Ok,sekarang bisa kalian lihat sndiri bahwasannya ketika kita membuat sebuah tempilan web seperti ini yang paling banyak adalah pembuatan Style untuk css-nya , jadi perlu perhatian khusu untuk membuat dan menyusun bagaimana tampilan dapat muncul ketika kita uji coba dan hasilnya-pun juga menarik.


Untuk script-nya bisa kalian lihat dibawah ini:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="21.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header><h1>Kategori Barang</h1></header>
<br>
<div class="kotak"></div><button class="t sepatu"><a href="mana"></a>Sepatu</button>
</br>
<br>
<div class="kotak"></div><button class="t tas">Tas</button>
</br>
<br>
<div class="kotak"></div><button class="t anak">Pakaian Anak</button>
</br>
<br>
<div class="kotak"></div><button class="t remaja">Pakaian Remaja</button>
</div>
</br>
<br>
<div class="kotak"></div><button class="t mainan">Mainan Anak</button>
</div>
</br>
<br>
<div class="kotak"></div><button class="t batik">Batik</button>
</div>
</br>
<br>
<div class="kotak"></div><button class="t makanan">Makanan</button>
</div>
</br>
</body>
</html>

Simpan script diatas anggap saja 21.html  kemudian simpan juga script dibawah ini dengan nama 21.css.

header{
  width:100%;
  height:100px;
  border:1px  solid black;
  background-color: red;
  opacity: 0.8;
  text-align: center;
}

body{
  background-image: url("matahari.jpg");
  background-size: 100%;
}

button{
  box-shadow: 0 0 2px 2px black;

}

.t{
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 2px 2px;
  font-size: 16px;
  cursor: pointer;
  width: 400px;
  height: 30px;
  border-radius: 5px;
}

/* Green */
.sepatu {
  border-color: #4CAF50;
  color: green;
}

.sepatu:hover {
  background-color: #4CAF50;
  color: white;
}

/* Blue */
.tas {
  border-color: #2196F3;
  color: dodgerblue
}

.tas:hover {
  background: #2196F3;
  color: white;
}

/* Orange */
.anak {
  border-color: #ff9800;
  color: orange;
}

.anak:hover {
  background: #ff9800;
  color: white;
}

/* Red */
.remaja {
  border-color: #f44336;
  color: red
}

.remaja:hover {
  background: #f44336;
  color: white;
}

/* Gray */
.dewasa {
  border-color: #e7e7e7;
  color: black;
}

.dewasa:hover {
  background: #e7e7e7;
  color: black;
}

.mainan {
  border-color: yellow;
  color: black;
}

.mainan:hover {
  background: yellow;
  color: grey;
}

.batik {
  border-color: purple;
  color: purple;
}

.batik:hover {
  background: purple;
  color:white;
}



.makanan {
  border-color: #e7e7e7;
  color: black;
}

.makanan:hover {
  background: #e7e7e7;
}



.kotak{
      width: 30px; 
      height:30px;
      background-color: magenta;
      text-align: center;
      line-height: 30px;
      margin: 3px;
      float: left;
        transition: 1s;
    }
    .kotak:hover {
      transform: rotate(360deg);
      border-radius: 50%;
    }
    .clear{
      clear:both
    }

.footer{
       width: 100%;
       height: 40px;
       border: 1px solid black;
       background-color: red;
}





(Catatan: untuk bagian tag <img src="matahari.jpg"> gambar bisa kalian pilih sendiri yang penting disimpan satu lokasi )dengan html dan css-nya




 
E.Referensi
Sandhika Galih (Belajar PHP untuk PEMULA _ ARRAY.mp4) 
https://www.malasngoding.com/membuat-tampilan-layout-website-sederhana-dengan-html-dan-css/
W3Schools.
F.Waktu pelaksanaan
09.30 WIB-16.00 WIB.
3.Penutup
G.Kesimpulan
Dari uraian diatas dapat disimpulan bahwasannya kita mampu memahami bagian struktur dan juga bagian dalam  membuat halaman pengkategorian.
H.Alat yang dibutuhkan
-1 buah laptop/PC.
-Text Editor (Disni saya menggunakan Sublime Text)
-Koneksi Jaringan.

0 Komentar

Posting Komentar