Cara Membuat Desain Web Responsive Sederhana

Kali ini saya akan memberikan Cara Membuat Desain Web Responvide Sederhana. Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.

Cara Membuatnya Adalah :

1. Buat folder baru dengan nama layout pada komputer kalian.
2. Buka Aplikasi notepad atau editor yang kalian pakai.
3. Kemudian tuliskan kode berikut ini dan beri nama index.html

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rampes Team</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">


 <div class="header">
 <h1>Rampes Team</h1>
 <i>Membuat layout responsive By <a href="rampesteam.blogspot.com">Rampes Team</a></i>
 </div>

 <div class="main">


  <div class="SB_left">
  <h3>Sidebar Kiri</h3>
  <p>Disini adalah sidebar kiri </p>
  </div>


  <div class="content">
  <h3>Judul Konten</h3>
  <p>Isi Konten</p>
  </div>


  <div class="SB_right">
   <h3>Sidebar Kanan</h3>
    <p>Disini adalah sidebar Kanan </p>
   <h3>Recent Update</h3>
    <ul>
     <li><a href="rampesteam.blogspot.com">Recent Update Ke-1</a></li>
     <li><a href="rampesteam.blogspot.com">Recent Update Ke-2</a></li>
     <li><a href="rampesteam.blogspot.com">Recent Update Ke-3</a></li>
    </ul>
  </div>
 </div>


 <div class="footer">Copyright &#169; <a href="rampesteam.blogspot.com">RampesTeam</a> </div>
</div>
</body>
</html>

4. Buka aplikasi notepad lagi dan tuliskan kode berikut ini dengan nama style.css

body{
 background: #dedede;
 font-family: 'Helvetica', arial, sans-serif;

 font-size: 15px;
}

p{
 margin-bottom: 20px;
 line-height: 1.5em;
}
h3{
 margin-bottom: 20px;
 border-bottom: 1px solid #aaa;
}

a{
 text-decoration: none;
 color: #999;
}
a:hover{
 color: #006B6B;
}

.container{
 max-width: 1080px;
 margin: 10px auto;
 background: #fff;
 overflow: hidden;
 padding: 10px;
}

.header{
 border: 1px solid #dedede;
 padding: 10px;
 margin: 10px;
}

/* Main */
 .SB_left{
  width: 250px;
  border: 1px solid #dedede;
  background: #eeeeee;
  padding: 10px;
  margin: 10px;
  float: left;
 }

 .content{
  width: 500px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }
  .content img{
   max-width: 100%;
   height: auto;
  }
  .content a{
   font-weight: bold;
  }

 .SB_right{
  width: 250px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }
  .SB_right ul{
   list-style-type: none;
  }
  .SB_right ul li{
   display: block;
  }
  .SB_right ul li a{
   display: block;
   border-bottom: 1px solid #dedede;
   margin-bottom: 10px;
   padding: 5px 5px;
  }
  .SB_right ul li a:hover{
   color: #006B6B;
 }

.footer{
 clear: both;
 border: 1px solid #dedede;
 color: #fff;
 background: #2D2727;
 padding: 10px;
 margin: 10px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {
 
 .container {
  width: 100%;
 }
 .left {
  width: 25%;
  background: #fff000;
 }
 .middle {
  width: 68%;
  float: right;
 }
 
 .right {
  clear: both;
  padding: 1% 4%;
  width: auto;
  float: none;
 }
}


/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {
 
 .header, 
 .footer{
  text-align: center;
 }
 .left {
  width: auto;
  float: none;
 }
 
 .middle {
  width: auto;
  float: none;
 }
 
 .right {
  width: auto;
  float: none;
 }

5. Simpan dan jalankan program tersebut .

Penjelasannya

<meta name="viewport" content="width=device-width, initial-scale=1.0">

digunakan untuk mengatur lebar viewport dan skala awal yang ada pada perangkat mobile.

.content img{
 max-width: 100%;
 height: auto;
}

digunakan untuk mengatur ukuran gambar pada content, jadi gambar akan berukuran pas bagian content dan tidak akan melebihi layout

9 komentar:

Unknown12 November 2015 at 10:50
Wah makasi infonya gan akan langsung di praktekkan.

bagi agan yang berminat belajar membuat web responsive bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html
Komputoo16 February 2017 at 16:49
Saat ini memang membuat desain responsif itu penting. Soalnya jumlah pengguna mobile phone meningkat tajam :D
ChivasR7725 May 2017 at 07:32
DAFTAR PERMAINAN KARTU ONLINE PALING MUDAH MENANG HANYA DI WWW.KARTUHOKKY.COM !!!

WEBSITE : KLIK DISINI!!!

BandarQ - Situs BandarQ Terpercaya

Sakong Online - Situs Bandar Sakong Terbaik Terpercaya

Bandar Poker - Situs Bandar Poker Aman Terpercaya

Poker - Situs Poker Online Terbaik dan Terpercaya

AduQ - Situs AduQ Paling Top Terpercaya

Capsa Susun - Situs Bandar Kartu Aman Terpercaya

DominoQQ - Situs Bandar Domino Online Paling Top

MENUJU WEBSITE : KLIK DISINI!!!
Essence Aquatic20 October 2017 at 14:54
memang mantap nih artikelnya.. thanks ya
Golden Gamat Mitoha15 May 2018 at 07:54
Wihh manteb gan info nya, makasih gan
website nya rapih
kunjung balik gan, banyak artikel tentang kesehatan dan pengobatan penyakit
Golden Gamat

Unknown13 August 2018 at 17:50
:)
naliyana bustami4 October 2018 at 10:55
Mantap atikelnya mas, memang saat ini tekhnologi sudah semakin maju dan tentunya para pangguna smart phone semakin membludak sehingga memang dibutuhkan tampilan web yang lebih dinamis sehingga memudahkan para pengguna smart phone untuk mengakses tampilan pada web semakin mudah.

Indahnya saling berbagi ilmu pengetahuan

Kunjungi website saya : Naliyana
website Kampus saya : Atma Luhur
Risma4 October 2018 at 20:37
Kreatifitas mengikuti perkembangan teknologi. Tampilan web responsive memang memiliki kelebihan apabila digunakan pada ukuran layar tertentu. dapat digunakan pada browser dengan ukuran layar berapapun, karena bersifat responsive atau dapat beradaptasi sesuai layar. dan bisa diakses dengan mobile device ataupun device lainnya. Terima kasih artikelnya

Kunjungi web kampus saya : Atma Luhur

Kunjungi web saya : Rismawati
Cecilia Morgana15 January 2019 at 19:21
wow nice article :)

REGPLAY - situs bandar bola terbesar dengan permainan judi terlengkap seperti togel, slot, keno, poker dan casino online terbaru dan terpercaya

Cara Membuat Desain Web Responsive Sederhana

Cara Membuatnya Adalah :

Penjelasannya

9 komentar:

Recent

Comments

Blog Archive