Bagaimana sih cara membuat website sederhana tentang penjualan mobil?. Oke, pada materi kali ini saya akan memberikan contoh membuat website yang tentunya mudah untuk dipahami. Sebelum membuat website, kita harus membuat satu folder yang nantinya folder tersebut akan kita isi dengan beberapa file. Dibawah ini merupakan coding untuk halaman awal website.
<!DOCTYPE html>
<html>
<head>
<title>Website Penjualan Mobil</title>
<style type="text/css">
body {
background-image: url(bc.webp);
background-size: cover;
background-attachment: fixed;
}
h1 {
color: white;
}
h3 {
color: white;
}
</style>
</head>
<body>
<h1 align="center">WELCOME TO MITA SHOWROOM</h1>
<marquee behavior="alternate" bgcolor="#999999" scrollamount="6"width="100%">
<h2>"SHOWROOM KAMI MENYEDIAKAN MOBIL-MOBIL BERKUALITAS"</h2>
</marquee>
<br><br><br>
<h3 align="center">DAFTAR MEREK MOBIL</h3>
<div align="center">
</div><br><br>
<table style="width: 100%">
<tr>
<th><a href="honda.html"><img src="honda.png" width="200px" height="300px"></a></th>
<th><a href="isuzu.html"><img src="isuzu.png" width="200px" height="300px"></a></th>
<th><a href="toyota.html"><img src="toyota.png" width="200px" height="300px"></a></th>
<th><a href="lexus.html"><img src="lexus.png" width="200px" height="300px"></a></th>
<th><a href="nissan.html"><img src="nissan.png" width="200px" height="300px"></a></th>
</tr>
</table>
</body>
</html>
Dibawah ini adalah hasil dari coding diatas. tag <style> diatas berguna untuk mempercantik halaman website yang kita buat, seperti merubah warna, font, jenis huruf,background, ukuran teks, dll.
Jadi disini kita ingin membuat, bagaimana ketika kita klik masing-masing merek mobilnya, kita akan menuju halamana selanjutnya yang berisi berbagai macam produk mobil dari merek honda tersebut. Untuk melakukan pemanggilan link, kita menggunakan <a href="nama file"></a>. Dibawah Ini merupakan contoh penggunaan codingnya.
<!DOCTYPE html>
<html>
<head>
<title>produk mobil honda</title>
<style type="text/css">
body {
background-image: url(bc.webp);
background-size: cover;
background-attachment: fixed;
}
h1 {
color: white;
}
td {
color: cyan;
text-align: center;
font-weight: bolder;
}
</style>
</head>
<body>
<marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL HONDA UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>
<br><br><br><br><br>
<table style="width: 100%">
<tr>
<th><img src="crv.jpg" width="200px" height="300px"></th>
<th><img src="acord.jpg" width="200px" height="300px"></th>
<th><img src="odsey.jpg" width="200px" height="300px"></th>
<th><img src="civic.jpg" width="200px" height="300px"></th>
<th><img src="city.jpg" width="200px" height="300px"></th>
</tr>
<tr >
<td>Honda CR-V<br>Rp.577.000.000</td>
<td>Honda Accord<br>Rp.749.000.000</td>
<td>Honda Odyssey<br> Rp.899.000.000</td>
<td>Honda Civic Type R<br>Rp.1.177 Milyar</td>
<td>Honda City<br>Rp.365.400.000</td>
</tr>
</table>
<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>
Gambar dibawah ini merupakan hasil dari coding diatas yang merupakan gambaran beberapa produk mobil beserta harganya dari merek Honda. Untuk mempercantik website, disini saya menggunakan tag <marquee> yang dapat membuat tulisan menjadi bergerak. Untuk mengatur kecepatan gerak teksnya kita dapat menggunakan Scrollamount.
Berikut ini merupakan coding untuk produk mobil merek isuzu. jangan lupa untuk menambahkan tag <style> agar halaman yang kita buat terlihat lebih cantik.
<!DOCTYPE html>
<html>
<head>
<title>produk mobil isuzu</title>
<style type="text/css">
body {
background-image: url(bc.webp);
background-size: cover;
background-attachment: fixed;
}
h1 {
color: white;
}
td {
color: cyan;
text-align: center;
font-weight: bolder;
}
</style>
</head>
<body>
<marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL ISUZU UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>
<br><br><br><br><br>
<table style="width: 100%">
<tr>
<th><img src="mux.jpg" width="200px" height="300px"></th>
<th><img src="premir.jpg" width="200px" height="300px"></th>
<th><img src="panter.jpg" width="200px" height="300px"></th>
<th><img src="traga.jpg" width="200px" height="300px"></th>
<th><img src="dmax.jpg" width="200px" height="300px"></th>
</tr>
<tr >
<td>Isuzu Mu-X 2022 4x4 <br>Rp.559.800.000</td>
<td>Isuzu MU-X Premiere<br>Rp.499.500.000</td>
<td>Isuzu Panther Grand Touring<br> Rp.342.300.000</td>
<td>Isuzu Traga Box Aluminium<br>Rp.239.800.000</td>
<td>Isuzu D-Max Rodeo 2.5L VGS AT<br>Rp.536.700.000</td>
</tr>
</table>
<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>
Dibawah Ini merupakan hasil dari coding diatas yang berisi beberapa produk mobil beserta harganya dari merek Isuzu. Fungsi tag <br> diatas yaitu untuk membuat baris baru atau dapat dikatakan sebagai pengganti tombol enter.
Berikut ini merupakan coding untuk produk mobil merek Toyota. Agar gambar yang kita tampilkan di website terlihat lebih rapi, disini kita bisa menggunakan <table>.
<!DOCTYPE html>
<html>
<head>
<title>produk mobil toyota</title>
<style type="text/css">
body {
background-image: url(bc.webp);
background-size: cover;
background-attachment: fixed;
}
h1 {
color: white;
}
td {
color: cyan;
text-align: center;
font-weight: bolder;
}
</style>
</head>
<body>
<marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL TOYOTA UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>
<br><br><br><br><br>
<table style="width: 100%">
<tr>
<th><img src="hybrid.webp" width="200px" height="300px"></th>
<th><img src="86.webp" width="200px" height="300px"></th>
<th><img src="vel.webp" width="200px" height="300px"></th>
<th><img src="gr.webp" width="200px" height="300px"></th>
<th><img src="land.webp" width="200px" height="300px"></th>
</tr>
<tr >
<td>Toyota Camry Hybrid<br>Rp.513.500.000</td>
<td>Toyota 86 TRD A/T<br>Rp.830.000.000</td>
<td>Toyota Vellfire<br>Rp.1.32 Milyar</td>
<td>Toyota GR Supra<br>Rp.2.05 Milyar</td>
<td>Toyota Land Cruiser<br>Rp.2.4 Milyar</td>
</tr>
</table>
<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>
Ini adalah hasil dari coding diatas yang merupakan gambaran beberapa produk mobil beserta harganya dari merek Toyota. tag<tr> yang terdapat pada coding diatas berfungsi untuk membuat baris, dimana pada tag <tr> didalamnya terdapat tag <th> yang berfungsi untuk membuat kolom. Nah, seperti yang kita lihat pada gambar dibawah ini bahwa gambar mobilnya seperti di dalam kolom dan terlihat lebih rapi.
Berikut ini merupakan coding untuk produk mobil merek Lexus. Pada website ini juga saya menambahkan nama mobil dan juga harganya. Untuk membuat itu, kita dapat menggunakan tag <td>.
<!DOCTYPE html>
<html>
<head>
<title>produk mobil lexus</title>
<style type="text/css">
body {
background-image: url(bc.webp);
background-size: cover;
background-attachment: fixed;
}
h1 {
color: white;
}
td {
color: cyan;
text-align: center;
font-weight: bolder;
}
</style>
</head>
<body>
<marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL LEXUS UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>
<br><br><br><br><br>
<table style="width: 100%">
<tr>
<th><img src="es.jpg" width="200px" height="300px"></th>
<th><img src="lm.jpg" width="200px" height="300px"></th>
<th><img src="lx.jpg" width="200px" height="300px"></th>
<th><img src="lc.jpg" width="200px" height="300px"></th>
<th><img src="ls.jpg" width="200px" height="300px"></th>
</tr>
<tr >
<td>Lexus ES<br>Rp.1.22 Milyar</td>
<td>Lexus LM 350<br>3.06 Milyar</td>
<td>Lexus LX 570<br> Rp.3.47 Milyar</td>
<td>Lexus LC 500<br>Rp.4.29 Milyar</td>
<td>Lexus LS 500<br>Rp.4.74 Milyar</td>
</tr>
</table>
<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>
Ini adalah hasil dari coding diatas yang merupakan gambaran beberapa produk mobil beserta harganya dari merek Lexus. Kita dapat melakukan pemanggilan link seperti <img src="nama gambar dan format gambar"> untuk menampilkan gambar mobil seperti di bawah ini.
Berikut ini merupakan coding untuk produk mobil merek Nissan. Untuk mengatur ukuran gambar kita dapat menggunakan tag <width> dan <height>.
<!DOCTYPE html>
<html>
<head>
<title>produk mobil nissan</title>
<style type="text/css">
body {
background-image: url(bc.webp);
background-size: cover;
background-attachment: fixed;
}
h1 {
color: white;
}
td {
color: cyan;
text-align: center;
font-weight: bolder;
}
</style>
</head>
<body>
<marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL NISSAN UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>
<br><br><br><br><br>
<table style="width: 100%">
<tr>
<th><img src="serena.jpg" width="200px" height="300px"></th>
<th><img src="trail.jpg" width="200px" height="300px"></th>
<th><img src="vara.jpg" width="200px" height="300px"></th>
<th><img src="leaf.jpg" width="200px" height="300px"></th>
<th><img src="tera.jpg" width="200px" height="300px"></th>
</tr>
<tr >
<td>Nissan Serena Highway Star<br>Rp.481.000.000</td>
<td>Nissan X Trail<br> Rp.547.700.000</td>
<td>Nissan Navara 2.5 VL AT<br>Rp.551.000.000</td>
<td>Nissan Leaf<br>Rp.649.000.000</td>
<td>Nissan Terra 2.5L 4x4 VL AT<br>Rp.680.800.000</td>
</tr>
</table>
<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>
Ini adalah hasil dari coding diatas yang merupakan gambaran beberapa produk mobil beserta harganya dari merek Nissan. Di website ini saya juga membuat tombol "BACK TO HOME PAGE" di setiap jenis produk dari berbagai merek mobil. Tombol tersebut berfungsi untuk membawa kita ke halaman utama.
Note:
Pastikan semua file ataupun gambar berada dalam satu folder. Nah untuk pemanggilan link, kita juga harus teliti dalam memasukkan nama filenya, begitu juga dalam memasukkan foto. Antara nama dan format harus sesuai, jika tidak sesuai, maka akan mengakibatkan tidak dapat terbukanya file atau gambar yang kita panggil melalui coding pemanggilan <a href="nama file"></a>.
Tidak ada komentar:
Posting Komentar