Cara membuat website html5 responsive part1

Ini adalah posting pertama saya di blog ini. Saya akan menjelaskan bagaimana cara membuat website dengan html5 dan css yang responsive. Sekarang ini website memang sedang populer dengan versi mobile karena sudah banyak pengguna gadget. Maka dari itu web yang responsive diperlukan untuk digunakan dalam versi mobile juga. Baik langsung saja kita membuat membuat website html5 responsive.

Pertama buat sebuah folder dengan nama "websiteku" atau bisa juga terserah anda.
Dalam folder tersebut buat file index.html dan style.css
Berikut susunan foldernya

- Websiteku
---- index.html
---- style.css

Isikan index.html dengan kode berikut :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web HTML 5 Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='style.css' rel='stylesheet' type='text/css'>
</head>

<body>
<div class='container'>
 <header>Websiteku</header>
    <ul class="menu">
     <li><a href="#">Beranda</a></li>
     <li><a href="#">Tentang Saya</a></li>
     <li><a href="#">Portofolio</a></li>
    </ul>
    <div class='wrapper-content'>
     <div class='content'>
         <article>
             <h3>Judul 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</p>
            </article> 
         <article>
             <h3>Judul 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</p>
            </article> 
        </div>
        <aside>
         <div class='widget'>
             <div class='w-head'>
                 Widget 1
                </div>
                <div class='w-body'>
                 Isi dari widget 1
                </div>
            </div>
         <div class='widget'>
             <div class='w-head'>
                 Widget 2
                </div>
                <div class='w-body'>
                 Isi dari widget 2
                </div>
            </div>
        </aside>
    </div>
    <footer>
     © 2014. Websiteku
    </footer>
</div>
</body>
</html>

Penjelasan kode:

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

Kode diatas digunakan untuk mengidentifikasi lebar device.

<header><article>,dll

Untuk deskripsi tag diatas klik link ini
Artikel selanjutnya Cara membuat website html5 responsive part2

Web design Nusantara

Cara membuat website html5 responsive part1

Artikel Terkait :

Click here for comments 0 comments: