Seperti tutorial sebelumnya saya telah seidikit berbagi mengenai desain web responsive atau Responsive Web Design (RWD). Nah pada kesempatan kali ini saya akan berbagi cara membuat desain responsive dengan HTML5.
Sebelum kita masuk ke tutorialnya perlu kita ketahui apa sih RWD itu?
RWD adalah:
RWD singkatan Desain Web Responsif , RWD dapat memberikan halaman web dalam ukuran variabel maksudnya ukuran variabel adalah ukuran webstite akan menyusuaikan dengan besar layar yang anda gunakan untuk membuka web tersebut., RWD adalah suatu keharusan untuk tablet dan perangkat mobile artinya jika anda membuka situs web anda di perangkat mobile maka desainnya akan menyusuaikan dengan ukuran layar HP anda inilah yang membuat RWD menjadi keharusan bagi perangkat mobile. Oke tidak usah panjang lebar lagsung saja ini dia contohnya.
silahkan copy paste script diatas ke html editor anda untuk meliaht hasilnya coba kecilkan ukuran browser anda lihat perbedaan yang terjadi. demikian terima kasih semoga tutorial ini bermanfaat.
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>W3Schools Demo</h1>
<h2>Resize this responsive page!</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>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>W3Schools Demo</h1>
<h2>Resize this responsive page!</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>
0 Komentar untuk "Cara membuat web responsive dengan HTML5"