Saat ini pengguna internet makin lama makin banyak, dan alat yang digunakan untuk mengakses internet salah satunya smartphone.
Dulu, untuk mengakses internet harus ke warnet. Kemudian pindah pakai laptop di rumah, saat ini lebih simple dengan smartphone.
Untuk itu, kita sebagai web developer harus membuat website yang cocok untuk setiap device.
Keren dibuka di laptop, juga keren dibuka di smarpthone.
Website yang bagus dibuka di device apapun inilah yang dinamakan web responsive.
Apa cukup dengan HTML?
Untuk buat web responsive tentu tidak cukup dengan HTML saja. Kita wajib menggunakan CSS.
Dengan menggunakan CSS kita bisa lebih sangat fleksibel dalam mendefinisikan layar, misal layar iPhone, Android, Laptop, dll.
Setting Viewport
Settingan pertama yang bisa dilakukan dengan HTML adalah mengatur meta viewport.
Cukup tambahkan meta kode dibawah setelah kode <title>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Implementasinya:
<!DOCTYPE html> <html> <head> <title>Coba Viewport</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <img src="image.jpg"> <p>Ini adalah contoh halaman yang responsive, tapi cuma disetting dengan menggunakan viewport saja. Tentu hasilnya tidak sebagus jika menggunakan CSS, tapi ya cukuplah untuk belajar saja.</p> </body> </html>
Berikut hasilnya:
Sekian tutorial membuat halaman responsive hanya dengan html. Tentu, cara ini masih sangat kurang, nanti Insya Allah kita bahas di tutorial selanjutnya.