MulaiCode
HTML

HTML Responsive

Pelajari cara membuat desain web yang responsif menggunakan HTML dan CSS, sehingga tampilan halaman web bisa menyesuaikan dengan ukuran layar perangkat.

Desain Web Responsif (Responsive Web Design)

Desain web responsif adalah pendekatan desain yang memastikan halaman web dapat menyesuaikan diri dengan berbagai ukuran layar perangkat, dari desktop hingga ponsel. HTML dan CSS digunakan untuk membuat halaman web yang responsif agar dapat memberikan pengalaman pengguna yang optimal.

Menggunakan Meta Tag Viewport

Untuk membuat halaman web responsif, kita perlu menambahkan tag <meta> dengan atribut viewport di dalam elemen <head>. Ini memberi tahu browser bagaimana menyesuaikan tampilan berdasarkan ukuran layar perangkat.

<meta name="viewport" content="width=device-width, initial-scale=1" />
  • width=device-width: Menentukan lebar viewport sesuai dengan lebar layar perangkat.
  • initial-scale=1: Menentukan tingkat zoom awal.

Contoh Desain Web Responsif

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Web Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      width: 100%;
      padding: 20px;
    }
    .header, .footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
    }
    .content > div {
      background-color: #f4f4f4;
      padding: 20px;
      margin: 10px;
      flex: 1;
      min-width: 200px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>Website Responsif</h1>
    </header>
 
    <div class="content">
      <div>
        <h2>Kolom 1</h2>
        <p>Konten kolom pertama.</p>
      </div>
      <div>
        <h2>Kolom 2</h2>
        <p>Konten kolom kedua.</p>
      </div>
      <div>
        <h2>Kolom 3</h2>
        <p>Konten kolom ketiga.</p>
      </div>
    </div>
 
    <footer class="footer">
      <p>&copy; 2025 Website Responsif</p>
    </footer>
  </div>
 
</body>
</html>

Tips Desain Responsif:

  1. Gunakan Grid dan Flexbox: Kedua teknik ini sangat berguna dalam membuat layout yang fleksibel dan responsif.
  2. Media Queries: Gunakan media queries untuk menyesuaikan tampilan berdasarkan ukuran layar. Misalnya: 
    @media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}
  3. Ukuran Responsif: Gunakan satuan yang fleksibel seperti %, vw, vh, dan em untuk ukuran elemen.

Dengan pendekatan ini, halaman web akan otomatis menyesuaikan dirinya di perangkat apapun tanpa mengorbankan tampilan atau fungsi.

HTML Layout

Pelajari cara membuat layout halaman web menggunakan elemen HTML seperti <header>, <nav>, <section>, <article>, dan <footer>.

HTML Semantic

Pelajari elemen-elemen semantik HTML5 yang digunakan untuk meningkatkan struktur dan aksesibilitas halaman web.

On this page