Rancang Web Responsif HTML

Apa itu Desain Web Responsif?

  • RWD adalah singkatan untuk Resposive Web Design (Desain Web Responsif)
  • RWD dapat mengirim halaman web dalam ukuran yang berubah-ubah
  • RWD diperlukan untuk perangkat tablet dan ponsel

Buat desain responsif Anda sendiri

Satu metode untuk membuat desain responsif adalah untuk membuatnya sendiri:

!DOCTYPE html
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>
<body>
<h1>CodeW3C.com Demo</h1>
<h2>Ubah ukuran halaman responsif ini!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London adalah ibu kota kota Inggris.</p>
<p>Ini adalah kota yang paling padat di United Kingdom,</p>
<p> dengan area metropolitan lebih dari 13 juta penduduk.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris adalah ibu kota dan kota yang paling padat di Perancis.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo adalah ibu kota Jepang, pusat Area Luar Kota Tokyo,</p>
dan area metropolitan yang paling padat di dunia.</p>
</div>
</body>
</html>

Coba Sendiri

Menggunakan Bootstrap

Satu metode lain untuk membuat desain responsif adalah menggunakan framework CSS yang sudah ada.

Bootstrap adalah framework HTML, CSS, dan JS yang paling populer untuk pengembangan web responsif.

Bootstrap membantu Anda mengembangkan situs yang indah di semua ukuran: layar, komputer laptop, tablet, atau ponsel:

!DOCTYPE html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>CodeW3C.com Demo</h1> 
  <p>Ubah ukuran halaman responsif ini!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London adalah ibu kota kota Inggris.</p>
    <p>Ini adalah kota yang paling padat di United Kingdom,</p>
    <p> dengan area metropolitan lebih dari 13 juta penduduk.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris adalah ibu kota dan kota yang paling padat di Perancis.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo adalah ibu kota Jepang, pusat Area Luar Kota Tokyo,</p>
    dan area metropolitan yang paling padat di dunia.</p>
  </div>
</div>
</div>
</body>
</html>

Coba Sendiri

Untuk belajar lebih banyak tentang Bootstrap, baca Panduan Bootstrap.