Membuat desain responsive pada web

Membuat desain responsive pada web. Nah, untuk kali ini Saya akan memberikan cara berupa kode untuk membuatnya. Desain responsive dapat memberikan halaman website Anda dalam ukuran variabel yang diperuntukkan untuk perangkat mobile maupun tablet. Semoga desainnya nanti bisa mempercantik tampilan web atau blog yang Anda miliki.

Sehingga pengunjung bisa lebih betah untuk menjelajah konten yang ada pada web atau blog Anda, bagi pengunjung yang menggunakan perangkat mobile atau tablet. Berikut ini script yang bisa Anda gunakan:

Script HTML nya seperti ini:

<h3>Desain Responsif by w3codez</h3>
<div class="res">
 <h3>HTML</h3>
<p>Pengenalan HTML5</p>
<p>HTML merupakan kepanjangan dari Hyper Text Markup Language...</p>
</div>
<div class="res">
<h3>CSS</h3>
<p>Pengenalan CSS3</p>
</div>
<div class="res">
<h3>PHP</h3>
<p>Pengenalan PHP5</p>
<p>PHP5 sudah mendukung OOP (Object Oriented Programming)</p>
</div>

Sedangkan untuk script CSS nya seperti ini:

<style>
.res {
    float: left;
    margin: 3px;
    padding: 10px;
    width: 150px;
    height: 125px;
    border: 1px dashed gray;
}
</style>

Penggabungan kedua script diatas dengan menggunakan HTML 5 menjadi seperti ini:

<!DOCTYPE html>
<head>
<style>
.res {
    float: left;
    margin: 3px;
    padding: 10px;
    width: 150px;
    height: 125px;
    border: 1px dashed gray;
}
</style>
</head>
<body>
<h3>Desain Responsif by w3codez</h3>
<div class="res">
<h3>HTML</h3>
<p>Pengenalan HTML5</p>
<p>HTML merupakan kepanjangan dari Hyper Text Markup Language...</p>
</div>
<div class="res">
<h3>CSS</h3>
<p>Pengenalan CSS3</p>
</div>
<div class="res">
<h3>PHP</h3>
<p>Pengenalan PHP5</p>
<p>PHP5 sudah mendukung OOP (Object Oriented Programming)</p>
</div>
</body>
</html>

Nanti hasilnya akan seperti ini:

Desain Responsif by w3codez

HTML

Pengenalan HTML5
HTML merupakan kepanjangan dari Hyper Text Markup Language...

CSS

Pengenalan CSS3

PHP

Pengenalan PHP5
PHP5 sudah mendukung OOP (Object Oriented Programming)

Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.

Pages

w3codez

adchoices