Phadma Sadna Phitaloka

Software Engineering || SMK Negeri 1 Mejayan

Thursday, February 05, 2015

HTML Responsive Web Design

Author:  |   |  No comments | 

Apa sih Responsive Web Design ? Ada yg belum tau ? Silahkan simaklah artikel berikut ini...

 Responsive Web Design adalah sebuah pendekatan yang menunjukkan bahwa desain dan pengembangan harus menanggapi perilaku dan lingkungan pengguna  berdasarkan pada ukuran, platform dan orientasi layar. Praktik ini meliputi penggunan perpaduan grid fleksibel dan layout, gambar dan CSS media query. Sebagaimana pengguna saat ini yang beralih dari laptop ke tablet, website secara otomatis harus menyesuaikan resolusi, ukuran gambar dan kemampuan scriptingnya. Dengan kata lain, website harus memiliki teknologi untuk secara otomatis merespon preferensi pengguna yang didasarkan pada resolusi layar gadget yang digunakan (komputer pc, laptop, netbook,tablet, smart phone dan mobile phone).

 Lalu bagaimana cara membuat design web responsive dengan HTML ? Mari kita coba...



 <!DOCTYPE html>
<html lang="en-US">
  <head>
      <title>HTML Responsive Web Disgn</title>
      <style>
            .city {
             float: left; 
             margin: 5px;
             padding: 15px;
             width: 300px;
             height: 300px;
             border: 1px solid black;
             } 
       </style>
  </head>
  <body>
       <h1>Inilah tampilan Responsive web Design</h1>
       <h2>Mencoba Menggunakan Responsive Web Design</h2>
       <br>
          <div class="city">
                <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="city">
                <h2>Paris</h2>
                <p>Paris is the capital and most populous city of France.</p>
          </div>
          <div class="city">
                <h2>Tokyo</h2>
                <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
                      and the most populous metropolitan area in the world.</p>
          </div>    </body>
</html>

Silahkan simpan file diatas dengan nama index.html dan ekskusi file nya di browser. Ini adalah hasil dari file ekskusinya :








Selengkapnya silahkan baca di W3Schools.

0 komentar:

Post a Comment