SistemInformasiPHP.net

Kumpulan Sistem Informasi PHP, Tips & Trik HTML, CSS3, Javascript, HTML5, MYSQL, dan Informasi Programming Lainnya

Membuat Halaman Responsive Pada Website

0 komentar

Halaman responsive merupakan halaman yang wajib dimiliki oleh website. Kenapa?? Karena seiring dengan perkembangan teknologi masa kini yang terlihat dari maraknya jenis gadget yang memiliki ukuran layar yang variatif. Hal ini juga berpengaruh pada perkembangan design website yang memungkinkan untuk ditampilkan pada layar yang berbeda ukuran. Desain website yang seperti ini dikenal dengan nama responsive website atau responsive web template atau responsive web design. Untuk membuat desain website responsive berikut saaa berikan sebuah desain sederhana tampilan web yang akan menyesuaikan ukuran layar/browser secara otomatis. Semakin kecil layar maka tampilan kiri dan kanan akan menyesuaikan layar. Begitu juga dengan desain kotak yang tampil. Berikut adalah source code nya :

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.article {
  float: left;
  margin: 5px;
  padding: 5px;
  width: 300px;
  height: 300px;
  border: 1px solid black;

</style>
</head>
<body>

<h1>W3Schools</h1>
<h2>Resize this responsive page!</h2>

<div class="article">
  <h3>About W3Schools</h3>
  <p>W3Schools is a web developer's site.
  It provides tutorials and references covering
  many aspects of web programming,
  including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.</p>
  <p>W3schools contains thousands of code examples.
  By using an online editor,
  readers can edit examples experimentally.</p>
</div>

<div class="article">
  <h3>Most Wanted Tutorials</h3>
  <p>HTML5 Tutorial</p>
  <p>How to build your web site with HTML5</p>
  <p>CSS3 Tutorial</p>
  <p>JavaScript Tutorial</p>
</div>

<div class="article">
  <h3>About This Demo</h3>
  <p>This demo is about responsive design.</p>
  <p>Try to make the page smaller or wider,
  to see responsive design in action.</p>
</div>

</body>
</html>


Selamat Mencoba :-).
Wasalam www.sisteminformasiphp.com
Share this article :

Posting Komentar

Dilarang berkomentar dengan menggunakan kata-kata kotor, tidak senonoh, & mengandung unsur pornografi. Komentar yang tidak mematuhi etika akan diblok & dihapus. Terimakasih

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Sistem Informasi PHP | Koleksi Source Code | Tutorial PHP - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger