ETS PWEB
Aisyahra Alhanni Satria
5053231010
1. Responsive web design adalah pendekatan dalam desain web yang bertujuan untuk membuat situs web dapat menyesuaikan tampilan dan fungsionalitasnya secara optimal di berbagai perangkat, baik itu desktop, tablet, maupun ponsel. Dengan RWD, situs web akan menyesuaikan layout, ukuran gambar, dan elemen-elemen lainnya agar tetap nyaman dilihat dan digunakan di layar dengan ukuran dan resolusi yang berbeda.
Dua teknik yang sering digunakan untuk mencapai responsive web design adalah:
- Media Queries: Teknik ini memungkinkan perubahan gaya (CSS) berdasarkan karakteristik perangkat seperti lebar layar, resolusi, dan orientasi. Dengan media queries, desainer dapat membuat aturan CSS yang hanya diterapkan pada kondisi tertentu, misalnya menampilkan layout yang berbeda pada layar besar dibandingkan layar kecil.
- Flexible Grid Layout (Layout dengan Grid Fleksibel): Grid fleksibel menggunakan unit proporsional seperti persentase daripada unit tetap seperti pixel. Ini memungkinkan elemen-elemen di halaman web untuk mengubah ukuran dan menyesuaikan tata letaknya secara otomatis saat ukuran layar berubah.
2. Elemen <meta> dalam HTML digunakan untuk menyimpan informasi metadata tentang dokumen HTML. Metadata ini memberikan informasi tambahan yang tidak terlihat langsung di halaman web tetapi berguna bagi browser, mesin pencari, dan layanan lainnya untuk memahami konten halaman web. Fungsi umum elemen <meta> termasuk mengontrol pengaturan halaman, mendefinisikan karakter set, memberikan informasi kepada mesin pencari, dan mengatur viewport untuk desain responsif.
Salah satu atribut penting dari elemen <meta> adalah atribut "name". Atribut ini digunakan untuk mendeskripsikan jenis informasi yang disimpan dalam elemen <meta>. Salah satu contohnya adalah viewport, yang digunakan untuk mendefinisikan bagaimana sebuah halaman ditampilkan pada perangkat yang berbeda.
Contoh Penggunaan Kode:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a sample website showcasing responsive design.">
<title>Sample Webpage</title>
</head>
<body>
<h1>Welcome to My Responsive Webpage</h1>
<p>This page adjusts well on all devices.</p>
</body>
</html>
- <meta charset="UTF-8">: Atribut charset menetapkan karakter set dokumen. Dalam contoh ini, karakter set yang digunakan adalah "UTF-8", yang mendukung hampir semua karakter yang diperlukan untuk berbagai bahasa di seluruh dunia.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Elemen ini mengatur bagaimana halaman ditampilkan pada berbagai perangkat. Atribut name="viewport" menentukan bahwa kita sedang mengontrol tampilan halaman, dan content="width=device-width, initial-scale=1.0" memastikan bahwa lebar viewport sesuai dengan lebar perangkat, serta skala awal diatur ke 1.0 (tanpa zooming).
- <meta name="description" content="This is a sample website showcasing responsive design.">: Elemen ini memberikan deskripsi singkat tentang isi halaman. Deskripsi ini digunakan oleh mesin pencari untuk menampilkan cuplikan informasi tentang halaman dalam hasil pencarian.
3. Desain:
Kode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electric Heart</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #333;
}
header {
background-color: #4a90e2;
padding: 20px;
}
header h1 {
color: white;
font-size: 24px;
margin: 0;
display: inline-block;
vertical-align: middle;
}
nav {
display: inline-block;
float: right;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}
.container {
padding: 40px 20px;
color: white;
max-width: 900px;
margin: 0 auto;
}
.container h2 {
font-size: 36px;
margin-bottom: 10px;
}
.container p {
font-size: 18px;
margin-bottom: 30px;
}
.product {
display: flex;
align-items: center;
background-color: #444;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.product img {
width: 150px;
height: auto;
border-radius: 8px;
margin-right: 20px;
}
.product h3 {
margin: 0;
font-size: 20px;
margin-bottom: 10px;
}
.product p {
margin: 5px 0;
font-size: 14px;
color: #ddd;
}
.product .price {
font-size: 18px;
color: #fff;
font-weight: bold;
margin-top: 10px;
}
.btn {
background-color: #ff6600;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
margin-top: 10px;
}
footer {
background-color: #222;
color: white;
text-align: center;
padding: 20px;
}
footer p {
margin: 5px;
}
footer a {
color: #4a90e2;
text-decoration: none;
}
</style>
</head>
<body>
<header>
<h1>electric Heart</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<div class="container">
<h2>Welcome</h2>
<p>Choose our best products</p>
<div class="product">
<img src="https://upload.jaknot.com/2024/01/images/products/3be0dd/original/super-kipas-angin-standing-portable-rechargeable-1200mah-bg-n1.JPG" alt="Kipas Angin Portable">
<div>
<h3>Kipas Angin Portable - Rechargeable 1200mAh</h3>
<p>Kipas Angin Portable putih lucu bisa dibawa rechargeable 1200mAh</p>
<p class="price">Rp.350.000,00</p>
<a href="#" class="btn">Beli Sekarang</a>
</div>
</div>
<div class="product">
<img src="https://m.media-amazon.com/images/S/al-na-9d5791cf-3faf/3cbba532-5f03-43af-9a8c-d29c8528933a._SL480_.png" alt="Blender Hitam Power 2200 watt">
<div>
<h3>Blender Hitam Power 2200 watt</h3>
<p>Blender Hitam lucu unik kabel 5 meter suara tidak berisik neighborhood friendly</p>
<p class="price">Rp.489.000,00</p>
<a href="#" class="btn">Beli Sekarang</a>
</div>
</div>
<div class="product">
<img src="https://www.static-src.com/wcsstore/Indraprastha/images/catalog/full//catalog-image/94/MTA-137131636/kirin_kirin_air_fryer_penggoreng_tanpa_minyak_3-5_l_kaf_935d_kaf935_kaf-935_full07_d2l0kg51.jpg" alt="Air Fryer Kirin Putih Hitam">
<div>
<h3>Air Fryer Kirin Putih Hitam</h3>
<p>Air Fryer mini portable hitam putih kabel 1 meter</p>
<p class="price">Rp.1.689.000,00</p>
<a href="#" class="btn">Beli Sekarang</a>
</div>
</div>
<p><a href="#" style="color: #ff6600;">Lihat lebih lanjut >></a></p>
</div>
<footer>
<p>Address: Jl. Kember No.9, Banyulali, Jawa</p>
<p>Socials: <a href="https://instagram.com" target="_blank">Instagram</a></p>
</footer>
</body>
</html>
Hasil:
4. Javascript:
// Mengambil semua tombol "Beli Sekarang"
const buyButtons = document.querySelectorAll('.btn');
// Menambahkan event listener ke setiap tombol
buyButtons.forEach(button => {
button.addEventListener('click', function(event) {
event.preventDefault(); // Mencegah default action dari tombol
const productName = this.parentElement.querySelector('h3').textContent;
// Menampilkan alert saat tombol diklik
alert(`Anda telah memilih untuk membeli: ${productName}`);
// Contoh fungsi untuk meneruskan ke halaman checkout (bisa diganti dengan URL checkout)
// window.location.href = '/checkout';
});
});
// Validasi sederhana sebelum pengguna bisa melihat lebih banyak produk
const seeMoreLink = document.querySelector('a[href="#"]');
seeMoreLink.addEventListener('click', function(event) {
event.preventDefault();
// Contoh validasi (misalnya pengguna harus login atau memasukkan data)
const isLoggedIn = confirm("Apakah Anda sudah login?");
if (isLoggedIn) {
alert("Silahkan melihat produk lebih lanjut.");
// window.location.href = '/more-products'; // Ganti dengan halaman yang sesuai
} else {
alert("Anda perlu login terlebih dahulu.");
}
});
Comments
Post a Comment