ওয়েবসাইট সাইন্স [পর্ব-১৫] :: সাইট কে হতে হবে রিসপন্সিভ । কেনো একটা সিম্পল রিসপন্সিভ ওয়েবসাইট বানানো দরকার

টিউন বিভাগ এইচটিএমএল
প্রকাশিত
জোসস করেছেন

ওয়েবসাইট সাইন্স

হ্যালো গাইজ,

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

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

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

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

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

খেয়াল করেন, ধরলাম আপনার পেইজে একটা ছবি আছে , যেটার ওয়াডথ বা পাশাপাশি সাইজ ৫০০ পিক্সেল । সেটা মোবাইল দিয়ে লোড করতে হলে ভিজিটর কে কিন্তু যুম করে দেখতে হবে, যেটা বিরক্তিকর কাজ, আপনি খুব সহজে কাজ টা করে দিতে পারেন। 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 এ প্রকাশিত। ও হ্যা, এটাকেও উদাহারন হিসেবে নিতে পারেন, ১০০ % রিসপন্সিভ।

Level 2

আমি শিমুল শাহরিয়ার। Founder, WebSea Internet Solutions, Dhaka। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 7 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 90 টি টিউন ও 497 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

ব্র্যান্ড কনসাল্টেন্ট, ফুলস্ট্যাক ডেভেলপার/ডিজাইনার। আমাকে পাওয়া যাবে @ https://ShimulShahriar.com


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

থাঙ্কস । blogger site এ কিভাবে Related Post wiget যোগ করব ?

ভালই। ধন্যবাদ। 😀

Level 0

দারুন হইছে বস।

উপকারী টিউন। ধন্যবাদ ভাই।