Desain Web Responsif di HTML: Tutorial dan Contohnya

Desain web responsif adalah tentang bagai mana cara membuat halaman web yang tampilanya terlihat bagus di semua perangkat.

Desain web yang responsif akan secara otomatis menyesuaikan ukuran layar dan viewport yang pada perangkat yang berbeda.

Section Artikel

1 Apa itu Desain Web Responsif?
2 Mengatur Viewport
3 Gambar Responsif
- - - 3.0.0.1 Menggunakan Properti width
4 Menampilkan Gambar Berbeda Tergantung Lebar Browser
5 Ukuran Teks Responsif
6 Query Media
7 Bootstrap

Apa itu Desain Web Responsif?

Desain Web Responsif adalah segala tentang cara memanfaatkan HTML dan CSS untuk secara otomatis mengubah ukuran, menyembunyikan, mengecilkan, atau memperbesar situs web, agar terlihat bagus di semua perangkat (desktop, tablet, dan ponsel).

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
.menu {
  float: left;
  width: 20%;
}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
}
.right {
  background-color: lightblue;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

@media only screen and (max-width:800px) {
 
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
 
  .menu, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;">

<div style="background-color:#f1f1f1;padding:15px;">
  <h1>Cinque Terre</h1>
  <h3>Ubah ukuran jendela browser</h3>
</div>

<div style="overflow:auto">
  <div class="menu">
    <div class="menuitem">Perjalanan</div>
    <div class="menuitem">Transportasi</div>
    <div class="menuitem">Sejarah</div>
    <div class="menuitem">Galeri</div>
  </div>

  <div class="main">
    <h2>Perjalanan</h2>
    <p>Perjalanan dari Monterosso ke Riomaggiore akan memakan waktu sekitar dua jam, dapat juga ditempuh dalam waktu satu jam tergantung pada kondisi cuaca dan kondisi fisik Anda.</p>
    <img src="https://pix6.agoda.net/geo/city/76349/1_76349_04.jpg?s=1920x822" style="width:100%">
  </div>

  <div class="right">
    <h2>Apa?</h2>
    <p>Cinque Terre terdiri dari lima desa: Monterosso, Vernazza, Corniglia, Manarola, dan Riomaggiore.</p>
    <h2>Dimana?</h2>
    <p>Di sisi barat laut Riviera Italia, di utara kota La Spezia.</p>
    <h2>Harga?</h2>
    <p>Perjalanannya gratis</p>
  </div>
</div>


<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> Halaman web ini adalah bagian dari demonstrasi desain web fluid. Ubah ukuran jendela browser untuk melihat konten merespons perubahan ukuran.</div>

</body>
</html>

Mengatur Viewport

Untuk membuat situs web yang responsif, tambahkan seluruh tag <meta> dibawah ini pada halaman web Anda:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Mengatur Viewport</h2>
<p>Contoh ini tidak benar-benar menunjukan sesuatu, selain menunjukkan cara menambahkan elemen meta viewport.</p>

</body>
</html>

Tag <meta> dapat menyetel viewport halaman, dan akan memberikan petunjuk browser tentang cara mengontrol dimensi dan skala halaman.

Gambar Responsif

Gambar responsif adalah gambar yang skalanya diatur dengan baik agar sesuai dengan ukuran browser apa pun.

Menggunakan Properti width

Jika properti width pada CSS diatur menjadi 100%, gambar akan responsif dan skala akan naik dan turun.

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Gambar Responsif</h2>
<p>Ketika properti lebar CSS diatur dalam nilai persentase, gambar akan naik dan turun saat mengubah ukuran jendela browser. Ubah ukuran jendela browser untuk melihat efeknya.</p>

<img src="https://wallpapercave.com/wp/wp5838343.jpg" style="width:100%;">

</body>
</html>

Menampilkan Gambar Berbeda Tergantung Lebar Browser

Elemen <picture> pada HTML memungkinkan untuk menentukan gambar yang berbeda untuk ukuran jendela browser yang berbeda.

Ubah ukuran jendela browser untuk melihat bagaimana gambar di bawah ini berubah tergantung pada lebarnya.

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>

<picture>
  <source srcset="https://wallpaperboat.com/wp-content/uploads/2020/06/08/44326/aesthetic-flower-03.jpg" media="(max-width: 600px)">
  <source srcset="https://wallpaperboat.com/wp-content/uploads/2020/06/08/44326/aesthetic-flower-03.jpg" media="(max-width: 1500px)">
  <source srcset="https://wallpaperboat.com/wp-content/uploads/2020/06/08/44326/aesthetic-flower-03.jpg">
  <img src="https://wallpaperboat.com/wp-content/uploads/2020/06/08/44326/aesthetic-flower-03.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

Ukuran Teks Responsif

Ukuran teks dapat diatur dengan satuan “vw” atau yang berarti “viewport width”.

Dengan begitu menggunakan satuan vw makan ukuran teks akan mengikuti ukuran jendela browser.

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1 style="font-size:10vw;">Teks Responsif</h1>

<p style="font-size:5vw;">Ubah ukuran jendela browser untuk melihat bagaimana skala ukuran teks.</p>

<p style="font-size:5vw;">Gunakan satuan "vw" saat mengatur ukuran teks. 10vw akan mengatur ukuran menjadi 10% dari lebar viewport.</p>

<p>viewport adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport memiliki lebar 50cm, 1vw adalah 0,5cm.</p>

</body>
</html>

Query Media

Selain mengubah ukuran teks dan gambar, penggunaan query media pada halaman web responsif juga umum dilakukan.

Dengan query media Anda dapat menentukan style yang sangat berbeda untuk ukuran browser yang berbeda.

Contoh: ubah ukuran jendela browser untuk melihat bahwa tiga elemen div di bawah ini akan ditampilkan secara horizontal di layar besar dan ditumpuk secara vertikal di layar kecil.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}

.left {
  background-color:#2196F3;
  padding:20px;
  float:left;
  width:20%; 
}

.main {
  background-color:#f1f1f1;
  padding:20px;
  float:left;
  width:60%; 
}

.right {
  background-color:#4CAF50;
  padding:20px;
  float:left;
  width:20%; 


@media screen and (max-width:800px) {
  .left, .main, .right {
    width:100%; 
}
</style>
</head>
<body>

<h2>Query Media</h2>
<p>Ubah ukran jendela browser.</p>

<p>Pastikan mencapai breakpoint pada 800px saat mengubah ukuran frame ini.</p>

<div class="left">
  <p>Menu</p>
</div>

<div class="main">
  <p>Konten Utama</p>
</div>

<div class="right">
  <p>Konten</p>
</div>

</body>
</html>

Bootstrap

Salah satu framework CSS yang populer adalah Bootstrap. Bootstrap menggunakan HTML, CSS dan jQuery untuk membuat halaman web yang responsif.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Halaman Bootstrap Pertamaku</h1>
    <p>Ubah ukuran halaman responsif ini untuk melihat efeknya!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Kolom 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Kolom 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Kolom 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Sekian pembahasan tentang desain web responsif pada HTML, semoga bermanfaat.

html

Desain Web Responsif di HTML: Tutorial dan Contohnya

Apa itu Desain Web Responsif?

Mengatur Viewport

Gambar Responsif

Menggunakan Properti width

Menampilkan Gambar Berbeda Tergantung Lebar Browser

Ukuran Teks Responsif

Query Media

Bootstrap

Elemen dan Teknik Layout di HTML: Cara Membuat dan Sintaknya

URL Encode di HTML: Contoh dan Sintaknya

You may also like