Berikut adalah contoh Membuat Desain Web Responsif dengan HTML. Untuk membuat situs web responsif, tambahkan tag berikut ke semua halaman web Anda:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">Contoh lain:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Style untuk elemen header */
header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* Style untuk elemen navigasi */
nav {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
/* Style untuk elemen konten */
section {
padding: 20px;
text-align: center;
}
/* Style untuk elemen footer */
footer {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* Style untuk tampilan layar kecil */
@media screen and (max-width: 600px) {
/* Style untuk elemen header */
header {
font-size: 18px;
}
/* Style untuk elemen navigasi */
nav {
font-size: 14px;
}
/* Style untuk elemen konten */
section {
font-size: 16px;
}
/* Style untuk elemen footer */
footer {
font-size: 18px;
}
}
</style>
</head>
<body>
<header>
<h1>Website Responsif</h1>
</header>
<nav>
<a href="#">Beranda</a> |
<a href="#">Tentang</a> |
<a href="#">Kontak</a>
</nav>
<section>
<h2>Selamat datang di website kami!</h2>
<p>Ini adalah contoh desain web responsif menggunakan HTML.</p>
</section>
<footer>
<p>Hak Cipta © 2022 Website Responsif</p>
</footer>
</body>
</html>Output:
See the Pen Membuat Desain Web Responsif dengan HTML by De Orchids (@De-Orchids) on CodePen.
Anda dapat menggunakan contoh kode di atas sebagai dasar untuk membuat desain web responsif menggunakan HTML. Pastikan untuk mengganti konten dan gaya sesuai dengan kebutuhan Anda.
Leave a Reply