Pada kesempatan ini saya akan berbagi cara membuat desain web yang respontif. apa itu desain respontif? desain web respontif adalah suatu desain web yang yang disain-nya akan menyusuaikan dengan layar yang anda gunakan untuk mengakses web tersebut. Pada tutorial sebelumnya saya telah berbagi cara mebuat header menu respontif nah untuk tutorial sekarang kita akan membahas bagaimana cara membuat desain yang respontif. berikut adalah source codenya:
<!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>
demikian tutorial kali ini baca juga tutorial Cara membuat desain web respontif dengan bostrap
4 Komentar untuk "Cara membuat desain web respontif"
gan ini artikelnya masih kurang lengkap
Tutorial nya. bener-bener bermanfaat gan. Terima kasih telah berbagi . .Tapi tutorial di atas tidak lengkap gan. perlu ditambahkan lagi. salam Jahet Bungas
terima kasig gan atas masukan nya mungkin lain kali kita akan lengkapai.
terima kasih atas masukannya semeton