Belajar HTML Part 22: Desain Web Responsif

Diposting oleh pada tanggal

Apa itu Desain Web Responsif?


Desain Web yang Responsif membuat halaman web Anda terlihat bagus di semua perangkat (desktop, tablet, dan telepon).


Desain Web yang Responsif adalah tentang penggunaan HTML dan CSS untuk mengubah ukuran, menyembunyikan, mengecilkan, memperbesar, atau memindahkan konten agar terlihat bagus di layar mana saja:

Contoh Code:

<!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) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
  <h1>The Puplit Rock</h1>
</div>
<div style="overflow:auto">
  <div class="menu">
    <div class="menuitem">The Drive</div>
    <div class="menuitem">The Walk</div>
    <div class="menuitem">The Return</div>
    <div class="menuitem">The End</div>
  </div>
  <div class="main">
    <h2>The Walk</h2>
    <p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
    <img src="img_pulpit.jpg" style="width:100%">
  </div>
  <div class="right">
    <h2>What?</h2>
    <p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
    <h2>Where?</h2>
    <p>The Pulpit Rock is in Norway.</p>
    <h2>Price?</h2>
    <p>The Walk is free!</p>
  </div>
</div>
<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;">This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>


Contoh Hasil Code:

Catatan: Sebuah halaman web harus terlihat bagus pada perangkat apapun!

Berikut Penjelasan Tiap Code Diatas:

Mengatur Viewport


Saat membuat laman web responsif, tambahkan elemen <meta> berikut di semua laman web Anda:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ini akan mengatur area pandang halaman Anda, yang akan memberi petunjuk pada browser bagaimana mengontrol dimensi dan penskalaan halaman.

Berikut adalah contoh halaman web tanpa tag meteran viewport, dan halaman web yang sama dengan tag meteran viewport:


Gambar Responsif


Gambar responsif adalah gambar yang berskala baik agar sesuai dengan ukuran browser.

Menggunakan lebar Property


Jika properti lebar diatur ke 100%, gambar akan responsif dan naik turun:
<img src="img_girl.jpg" style="width:100%;">

Perhatikan bahwa pada contoh di atas, gambar bisa ditingkatkan menjadi lebih besar dari ukuran aslinya. Solusi yang lebih baik, dalam banyak kasus, akan menggunakan properti dengan lebar maksimal.

Menggunakan Properti maksimal


Jika properti dengan lebar maksimal diatur ke 100%, gambar akan menurun jika perlu, namun tidak sampai skala lebih besar dari ukuran aslinya:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Tampilkan Gambar Berbeda Tergantung pada Lebar Browser


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

Ubah ukuran jendela browser untuk melihat bagaimana gambar di bawah ini berubah tergantung pada lebar:
<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Ukuran Teks Responsif


Ukuran teks dapat diatur dengan unit "vw", yang berarti "lebar viewport".

Dengan begitu ukuran teks akan mengikuti ukuran jendela browser:
<h1 style="font-size:10vw">Hello World</h1>

Viewport adalah ukuran jendela browser. 1vw = 1% lebar viewport. Jika viewport lebar 50cm, 1vw adalah 0.5cm.

Media Queries


Selain mengubah ukuran teks dan gambar, biasanya juga menggunakan Media Queries di laman web responsif.

Dengan Media Queries, Anda dapat menentukan style yang sama sekali berbeda untuk ukuran browser yang berbeda.

Contoh: ubah ukuran jendela browser untuk melihat bahwa ketiga elemen div di bawah ini akan ditampilkan secara horizontal pada layar besar dan ditumpuk secara vertikal pada layar kecil:
<style>
.left, .right {
  float:left;
  width:20%; /*The width is 20%, by default*/}

.main {
  float:left;
  width:60%; /*The width is 60%, by default*/}

/*Use a media query to add a breakpoint at 800px:*/
@media (max-width:800px) {
  .left, .main, .right {
    width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
  }
}</style>


Contoh Code:

<!DOCTYPE html>
<html>
<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%;/*The width is 20%, by default*/
}
.main {
  background-color:#f1f1f1;
  padding:20px;
  float:left;
  width:60%;/*The width is 60%, by default*/
}
.right {
  background-color:#4CAF50;
  padding:20px;
  float:left;
  width:20%;/*The width is 20%, by default*/
}
/*Use a media query to add a break point at 800px:*/
@media (max-width:800px) {
  .left, .main, .right {
    width:100%;/*The width is 100%, when the viewport is 800px or smaller*/
  }
}
</style>
<body>
<div class="left">
  Left Menu<br><br><br><br>
</div>
<div class="main">
  Main Content<br><br><br><br>
</div>
<div class="right">
  Right Content<br><br><br><br>
</div>
<p>Resize the browser window.</p>
<p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>
</body>
</html>


Untuk mempelajari lebih lanjut tentang Kueri Media dan Desain Web Responsif, baca Tutorial RWD kami.

Halaman Web Responsif - Contoh Penuh


Sebuah halaman web responsif harus terlihat bagus di layar desktop besar dan ponsel kecil.

Contoh Code:

<!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%;
  text-align:center;
}
.menuitem {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px;
}
.main {
  float:left;
  width:60%;
  padding:0 20px;
}
.right {
  background-color:#e5e5e5;
  float:left;
  width:20%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}
@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>
<div style="overflow:auto">
  <div class="menu">
    <div class="menuitem">Link 1</div>
    <div class="menuitem">Link 2</div>
    <div class="menuitem">Link 3</div>
    <div class="menuitem">Link 4</div>
  </div>
  <div class="main">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
  <div class="right">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>
<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>
</body>
</html>


Desain Web Responsif - Frameworks


Ada banyak Frameworks CSS yang ada yang menawarkan Desain Responsif.

Mereka bebas, dan mudah digunakan.

Menggunakan W3.CSS


Cara yang bagus untuk membuat desain responsif, adalah dengan menggunakan style sheet responsif, seperti W3.CSS

W3.CSS memudahkan untuk mengembangkan situs yang terlihat bagus dengan berbagai ukuran; desktop, laptop, tablet, atau telepon:

Contoh Code:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>

Untuk mempelajari lebih lanjut tentang W3.CSS, baca Tutorial W3.CSS kami.

Bootstrap


Kerangka populer lainnya adalah Bootstrap, ia menggunakan HTML, CSS dan jQuery untuk membuat halaman web yang responsif.

Contoh Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>

Untuk mempelajari lebih lanjut tentang Bootstrap, buka Tutorial Bootstrap kami.

Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2