হ্যালো গাইজ,

মনে অনেক ভালোলাগা নিয়ে লিখতে বসলাম।

আমাদের অনেকের ওয়েবসাইট আছে, অনেক সুন্দর, কিছু কিছু সাইট অনেক ইউনিক। বাট অনেকেই একটা দিক ভুলে যাই।

ধরেন আপনি কম্পিউটারের জন্য একটা ওয়েবসাইট বানাইলেন। সেটাতে কি মোবাইল দিয়ে কেউ ই ঢুকবে না ? ঢুকবেই, কেননা আমাদের দেশের বেশীর ভাগ ইউজার এখনো মোবাইল ব্যাবহার করে ইন্টারনেট ব্রাউজ করেন। তো একটা ডেক্সটপ পেইজ রে মোবাইল দিয়ে ভিজিট করা কতখানি প্যারার কাজ, তা যারা ভুক্তভোগী তারাই জানেন।

সো আমাদের এমন সাইট বানাইতে হবে, যা মোবাইল বা অন্য যেকোন ডিভাইস দিয়েই ব্রাউজ করা যায়।

আমি হাই লেভেলের কোডিং এ যাবো না, সিম্পল এই আসেন।

খেয়াল করেন, ধরলাম আপনার পেইজে একটা ছবি আছে , যেটার ওয়াডথ বা পাশাপাশি সাইজ ৫০০ পিক্সেল । সেটা মোবাইল দিয়ে লোড করতে হলে ভিজিটর কে কিন্তু যুম করে দেখতে হবে, যেটা বিরক্তিকর কাজ, আপনি খুব সহজে কাজ টা করে দিতে পারেন। Html এ width কিন্তু পিক্সেল এর পাশাপাশি পারসেন্ট দিয়েও সিলেক্ট করে দেয়া যায়।

নিচের কোডগুলো দেখেন।

<img src="/image.jpg" /> এটা সাধারন একজন ব্যাবহার করবেন।  একজন জিনি কাজ ভালো জানেন উনি ব্যাবহার করবেন <img src="/image.jpg" hight="300" /> এভাবে।  এতে করে ছবি টা ঠিক কত পিক্সেলে লোড হবে তা ব্রাউজার কে বলে দেয়া হয়, তো পেইজের ডিজাইনিং নিয়ে সমস্যায় পড়তে হয় না।

এখন যখন আপনি রিস্পন্সিভ কিছু করতে যাবেন, মনে করেন আপনার পেইজ ছবি অর্ধেক যায়গা যুরে থাকবে। সেক্ষেত্রে সিম্পল এভাবে লিখতে পারেন <img src="/image.jpg" width="50%" /> । খেয়াল করেন, আমি এখানে ব্রাউজার কে বলে দিলাম, যে ছবি টার অবস্থান হবে ঠিক অর্ধেক যায়গা জুরে।এখন সেটা আমার ল্যাপটপ হোক, কি এন্ড্রয়েড অথবা পুরনো দিনের জাভা ফোন, ছবির সাইজ পেইজের পাশাপাশি ভাবে অর্ধেক ই থাকবে। মজার না ???

আচ্ছা , এটা গেলো ছবির কথা। Div গুলো একি কায়দায় করতে পারেন। পাশাপাশি দুটো বক্স কে ধরে রাখতে সেগুলোতে ৫০ পারসেন্ট করে দিতে পারেন। ও হ্যা, মনে রাখা লাগবে, পাশাপাশি রাখতে <span> ট্যাগ টা কাজে লাগবে।

আর একটা ছোট ব্যাপার হলো, সব কন্টেন্ট গুলো align সাব ট্যাগ দিয়ে একপাশেই রাখতে পারেন। উদাহারন দেখেন,

<div align="left" width="100%" > আপনার কন্টেন্ট </div>

এই কোড টুকুতে আমি ব্রাউজার কে বলে দিলাম, এই ডিভ বা বক্স টা যেকোন পেইজের বাম দিকে থাকবে, আর তার পাশাপাশি যায়গা নিবে ১০০ পারসেন্ট, সেটা যেকোন ব্রাউজারেই হোক।  Align ট্যাগের কাজ হচ্ছে, কোন দিকে থাকবে, মিডল, রাইট না লেফট সেটা ঠিক করে দেয়া।

Html অনেক মজার একটা কোড, আর এটা সম্পুর্ন শেষ না করলে যেখানেই যান, পদে পদে প্রবলেম এ পড়তে হবে, তো এটাকে একটা খেলা হিসেবে নেন, চেষ্টা করেন, নতুন কি করা যায় এটা দিয়ে। ধন্যবাদ।

পোস্ট এর আগে Fajlami.com এ প্রকাশিত। ও হ্যা, এটাকেও উদাহারন হিসেবে নিতে পারেন, ১০০ % রিসপন্সিভ।