Cara Membuat Toko Online Dengan HTML- Mudah Untuk Pemula
Cara Membuat Toko Online Mobil dengan Html
Pada kesempatan ini saya akan membuat website toko online mobil dengan HTML.
Tampilan toko online cukup sederhana dan keren. Langsung saja simak script dan proses pembuatannya menggunakan aplikasi Sublime Text.
Berikut Cara Pembuatannya:
1. Buat Folder Baru
Langkah pertama yang harus dilakukan adalah membuat sebuah folder baru dengan nama apapun. Caranya dengan klik kanan, kemudian klik new-folder.
Perlu diingat untuk bisa menampilkan website tersebut, semua file html dan foto yang ingin ditampilkan maka dimasukkan semua ke dalam satu foder. seperti ini :
2. Buat Folder Foto
Jika ingin menambahkan foto dalam html maka kodenya harus sama dengan nama file foto serta type fotonya(jpg,jpeg,png, atau yang lainnya).
contohnya seperti ini:
background-image: url(shorum.jpg); background-size: cover;
background-attachment: fixed;
3. Buat file home.html
Langkah selanjutnya buat nama file bebas sesuai keinginan anda "namafile.html" (jangan pakai spasi). Disini saya memberi nama filenya yaitu "home.html".
Seperti ini bentuk gambar dari "home.html" :
Berikut kode cara pembuatannya :
<!DOCTYPE html>
<html>
<head>
<title>ALYA'S SHORUM</title>
<style type="text/css">
body {
background-image: url(shorum.jpg); background-size: cover;
background-attachment: fixed;
}
h1 {
color: orange;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ffa500;
}
li{
float: left;
}
li a{
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.yuhu){
background: #ffffff;
}
.yuhu {
background-color: #black;
}
td {
text-align: center;
font-weight: bolder;
}
</style>
</head>
<body>
<h1 align="center">SELAMAT DATANG DI SHORUM MOBIL</h1>
<ul>
<li><a class="yuhu" href="home.html">Home</a></li>
</ul>
<marquee behavior="alternate" bgcolor="#ffa500" scrollamount="6" width="100%">
<h2>Kami Siap Melayani Anda</h2>
</marquee>
<h2 align="center" style="color:orange">PILIH MEREK MOBIL YANG ANDA MAU DIBAWAH INI</h2><br>
<div align="center">
</div><br><br>
<table style="width: 100%">
<tr>
<th><a href="toyota.html"><img src="toyota.jpg" width="200px" height="250px"></th>
<th><a href="nissan.html"><img src="nissan.jpg" width="200px" height="250px"></th>
<th><a href="hyundai.html"><img src="hyundai.jpg" width="200px" height="250px"></th>
<th><a href="jeep.html"><img src="jeep.jpg" width="200px" height="250px"></th>
<th><a href="bmw.html"><img src="bmw.png" width="200px" height="250px"></th>
</tr>
</body>
</html>
4. Membuat file toyota.html
Nah, untuk bisa masuk ke menu pilihan mobil Toyota tersebut, kodenya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>ALYA'S SHORUM</title>
<style type="text/css">
body {
background-image: url(shorum.jpg);
background-size: 100% cover;
background-attachment: fixed;
</style>
</head>
<body>
}
<marquee behavior="alternate" bgcolor="#ffa500" scrollamount="6" width="100%">
<h2>PILIHAN MOBIL UNTUK MEREK TOYOTA</h2>
</marquee>
<div align="center">
</div><br><br>
<table style="width: 100%">
<tr>
<th><img src="toyota agya.webp" width="200px" height="300px"></th>
<th><img src="toyota alphard.jpg" width="200px" height="300px"></th>
<th><img src="toyota yaris.webp" width="200px" height="300px"></th>
<th><img src="toyota venturer.webp" width="200px" height="300px"></th>
<th><img src="toyota hilux.jpg" width="200px" height="300px"></th>
</tr>
<tr>
<td>Toyota Agya<br>Rp 155,5 - 176,6 Juta</td>
<td>Toyota Yaris<br>Rp 292,4 - 321,6 Juta</td>
<td>Toyota Alphard<br>Rp 1,15 - 1,58 Milyar</td>
<td>Toyota Venturer<br>Rp 485,2 - 517,6 Juta</td>
<td>Toyota Hilux<br>Rp 262,8 - 495,3 Juta</td>
</tr>
<tr>
</table>
<p><a href=home.html>Back</a></p>
</body>
</html>
5. Membuat file nissan.html
Nah, menu kedua ada pilihan mobil Nissan, untuk bisa masuk ke menu tersebut kodenya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>ALYA'S SHORUM</title>
<style type="text/css">
body {
background-image: url(shorum.jpg);
background-size: 100% cover;
background-attachment: fixed;
</style>
</head>
<body>
}
<marquee behavior="alternate" bgcolor="#ffa500" scrollamount="6" width="100%">
<h2>PILIHAN MOBIL UNTUK MEREK NISSAN</h2>
</marquee>
<div align="center">
</div><br><br>
<table style="width: 100%">
<tr>
<th><img src="nissan leaf.webp" width="200px" height="300px"></th>
<th><img src="nissan livina.webp" width="200px" height="300px"></th>
<th><img src="nissan magnite.webp" width="200px" height="300px"></th>
<th><img src="nissan serena.webp" width="200px" height="300px"></th>
<th><img src="nissan x trail.webp" width="200px" height="300px"></th>
</tr>
<tr>
<td>Nissan Leaf<br>Rp 728 - 730 Juta</td>
<td>Nissan Livina<br>Rp 253,9 - 295,5 Juta</td>
<td>Nissan Magnite<br>Rp 250,65 - 278,6 Juta</td>
<td>Nissan Serena<br>Rp 524,3 Juta</td>
<td>Nissan X Trail<br>Rp 576 Juta</td>
</tr>
<tr>
</table>
<p><a href=home.html>Back</a></p>
</body>
</html>
Nah, sama seperti sebelumnya. Untuk masuk ke menu pilihan mobil hyundai kita gunakan kode sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>ALYA'S SHORUM</title>
<style type="text/css">
body {
background-image: url(shorum.jpg);
background-size: 100% cover;
background-attachment: fixed;
</style>
</head>
<body>
}
<marquee behavior="alternate" bgcolor="#ffa500" scrollamount="6" width="100%">
<h2>PILIHAN MOBIL UNTUK MEREK HYUNDAI</h2>
</marquee>
<div align="center">
</div><br><br>
<table style="width: 100%">
<tr>
<th><img src="hyundai creta.webp" width="200px" height="300px"></th>
<th><img src="hyundai ioniq.webp" width="200px" height="300px"></th>
<th><img src="hyundai palisade.jpg" width="200px" height="300px"></th>
<th><img src="hyundai santa fe.jpg" width="200px" height="300px"></th>
<th><img src="hyundai staria.webp" width="200px" height="300px"></th>
</tr>
<tr>
<td>Hyundai Creta<br>Rp 281,5 - 401 Juta</td>
<td>Hyundai Ioniq<br>Rp 682 - 723 Juta</td>
<td>Hyundai Palisade<br>Rp 795 - 1,04 Milyar</td>
<td>Hyundai Santa Fe<br>Rp 599 - 729 Juta</td>
<td>Hyundai Staria<br>Rp 896 - 1,03 Milyar</td>
</tr>
<tr>
</table>
<p><a href=home.html>Back</a></p>
</body>
</html>7. Membuat file jeep.html
Kode untuk menampilkan menu pilihan mobil Jeep sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>ALYA'S SHORUM</title>
<style type="text/css">
body {
background-image: url(shorum.jpg);
background-size: 100% cover;
background-attachment: fixed;
</style>
</head>
<body>
}
<marquee behavior="alternate" bgcolor="#ffa500" scrollamount="6" width="100%">
<h2>PILIHAN MOBIL UNTUK MEREK JEEP</h2>
</marquee>
<div align="center">
</div><br><br>
<table style="width: 100%">
<tr>
<th><img src="jeep cherokee.jpg" width="200px" height="300px"></th>
<th><img src="jeep compass.webp" width="200px" height="300px"></th>
<th><img src="jeep gladiator.webp" width="200px" height="300px"></th>
<th><img src="jeep wrangler.jpg" width="200px" height="300px"></th>
<th><img src="Jeep Rubicon.jpg" width="200px" height="300px"></th>
</tr>
<tr>
<td>Jeep Cherokee<br>Rp 1,67 - 1,9 Milyar</td>
<td>Jeep Compass<br>Rp 1,52 - 1,62 Milyar</td>
<td>Jeep Gladiator<br>Rp 2,18 - 2,35 Milyar</td>
<td>Jeep Wrangler<br>Rp 615 Juta</td>
<td>Jeep Rubicon<br>Rp 1,78 - 1,89 Milyar</td>
</tr>
<tr>
</table>
<p><a href=home.html>Back</a></p>
</body>
</html>8. Membuat file bmw.html
Kode untuk menampilkan menu pilihan mobil BMW sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>ALYA'S SHORUM</title>
<style type="text/css">
body {
background-image: url(shorum.jpg);
background-size: 100% cover;
background-attachment: fixed;
</style>
</head>
<body>
}
<marquee behavior="alternate" bgcolor="#ffa500" scrollamount="6" width="100%">
<h2>PILIHAN MOBIL UNTUK MEREK BMW</h2>
</marquee>
<div align="center">
</div><br><br>
<table style="width: 100%">
<tr>
<th><img src="BMW X4.jpg" width="200px" height="300px"></th>
<th><img src="BMW I3s.jpg" width="200px" height="300px"></th>
<th><img src="BMW 5 Series Sedan.jpg" width="200px" height="300px"></th>
<th><img src="4 Series Convertible.jpg" width="200px" height="300px"></th>
<th><img src="BMW 4 Series Coupe.jpg" width="200px" height="300px"></th>
</tr>
<tr>
<td>BMW X4<br>Rp 1,67 Milyar</td>
<td>BMW I3s<br>Rp 1,35 Milyar</td>
<td>BMW 5 Series Sedan<br>Rp 1,25 - 1,44 Milyar</td>
<td>4 Series Convertible<br>Rp 1,53 Milyar</td>
<td>BMW 4 Series Coupe<br>Rp 1,40 Milyar</td>
</tr>
<tr>
</table>
<p><a href=home.html>Back</a></p>
</body>
</html>
Nah, Setelah selesai membuat web toko online mobil sederhana ini, silahkan anda buka file "home.html" ke browser yang telah disediakan. Jika terjadi error atau bermasalah, silahkan anda teliti lagi dengan baik dan benar.
Sekian pembahasan mengenai cara Membuat Toko Online Mobil dengan HTMl. Mohon maaf apabila ada kesalahan baik penulisan maupun penjelasan.
Selamat mempraktekkan :)
Komentar
Posting Komentar