Design Web Responsive Menggunakan HTML

Selamat siang sobat blogger kali ini saya akan share bagaimana mendesain web responsive menggunakan HTML. Apa sih itu web responsive Bang? Responsive web adalah sebuah tehnik untuk membuat website menyesuaikan diri dengan tampilan yang diakses melalui smartphone, dan tab, intinya berukuran kecil.

Web yang responsive membuat akan membuat pengunjung merasakan kesan yang lebih lah kenapa bang? karena konten yang ada pada web responsive akan terlihat semua tanpa geser sana dan sini, dia akan menyesuaikan dengan apa yang kita gunakan. hehe kaya bunglon menyesuaikan segala....

Jika sobat blogger mencoba sebuah web yang tidak responsive maka sobat akan jadi sedikit repot, karena sobat harus geser kenan dan kiri untuk melihat konten secara menyeluruh, dan kemungkinan ada konten yang tidak muncul karena tersembunyi. Langsung aja berikut contoh desain web responsive menggunakan HTML.

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
   float: left;
   margin: 10px;
   padding: 10px;
   max-width: 300px;
   height: 200px;
   border: 1px solid green;
}  
</style>
</head>
<body>

<h1>Responsive Web Design Demo</h1>

<div class="city">
  <h2>mamapang</h2>
  <p>mamampang adalah desa kecil </p>
  <p>yeng terletak di keluarah garassi, mempunyai sejuta kekayaan yang ada di dalamnya.</p>
</div>

<div class="city">
  <h2>Garassi</h2>
  <p>kelurahan yang tidak bgtu luas</p>
  <p>hanya sekitar 100 ribu 50 ribu penduduk dengan masyarakatnya yang ramah.</p>
</div>

<div class="city">
  <h2>Gowa</h2>
  <p>Sebuah kabupaten yang sangat luas</p>
  <p>Gowa adalah kabupaten yang terletak di sulawesi-selatan,mempunyai tempat wisat ayang sangat memukau bagi semua orang.</p>
</div>

</body>
</html>


Bagi teman-teman yang suka belajar web HTML, java, PHP dan lainnya say asarankan sobat belajar di W3school.com disana semuanya ada, dan bagusnya lagi kita bisa mencobanya langsung, sekian postingan klai ini semoga bisa bermanfaat, wassalam­čśÉ



Belum ada tanggapan untuk "Design Web Responsive Menggunakan HTML"

Post a Comment