Membuat Desain Web Responsif dengan HTML

Dec 31, 2023

—

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">

HTML

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>

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.

Membuat Desain Web Responsif dengan HTML

Artikel Terbaru ⭐