একটি ওয়েবপৃষ্ঠা লেআউটের বাম দিকে ইমেজ সাইন ইন করার জন্য সিএসএস ব্যবহার করা
আজ প্রায় কোনও ওয়েব পেজ দেখুন এবং আপনি সেই পৃষ্ঠাগুলিতে প্রচুর সংখ্যক পাঠ্য এবং চিত্র তৈরির সমন্বয় দেখতে পাবেন। একটি পৃষ্ঠায় পাঠ্য এবং ছবি যোগ করা খুব সহজ। পাঠ্যটি অনুচ্ছেদ, তালিকা এবং শিরোনামগুলি মত মানক এইচটিএমএল ট্যাগ ব্যবহার করে কোডেড করা হয়, যখন ইমেজগুলি উপাদান ব্যবহার করে অন্তর্ভুক্ত করা হয়
যে টেক্সট করতে ক্ষমতা এবং যারা ইমেজ একসঙ্গে ভাল কাজ কি মহান ওয়েব ডিজাইনার বাদে সেট! আপনি কেবলমাত্র আপনার পাঠ্য এবং চিত্রগুলি পরস্পরকে দেখাতে চান না, যা এই ব্লক-স্তরের উপাদানগুলিকে ডিফল্টরূপে বিন্যাস করে। না, আপনি কীভাবে টেক্সট এবং চিত্রগুলি একসঙ্গে প্রবাহিত করবেন তা নিয়ে কিছু নিয়ন্ত্রণ করতে চান যা আপনার ওয়েবসাইটের ভিজ্যুয়াল ডিজাইনের শেষে হবে।
একটি পৃষ্ঠার বাম পাশে সংযুক্ত থাকা একটি চিত্র থাকা সত্বেও সেই পৃষ্ঠাটির পাঠ্য প্রবাহের প্রবাহটি প্রিন্ট করা নকশা এবং ওয়েব পেজগুলির জন্য একটি সাধারণ নকশা চিকিত্সা। ওয়েব পরিভাষায়, এই প্রভাবটি ছবিটি ভাসমান হিসাবে পরিচিত । এই শৈলী "float" জন্য CSS সম্পত্তি সঙ্গে অর্জন করা হয়। এই সম্পত্তি টেক্সট ডান ডান দিকে বাম প্রান্তিক মানের চারপাশে প্রবাহিত করতে পারবেন। (বা তার বাম দিকে ডান-সংখ্যার ছবির কাছাকাছি।) আসুন এই দৃষ্টিভঙ্গিটি কীভাবে অর্জন করতে হয় তা দেখুন।
এইচটিএমএল দিয়ে শুরু করুন
আপনি যা করতে হবে প্রথম জিনিস সঙ্গে কিছু এইচটিএমএল কাজ আছে। আমাদের উদাহরণের জন্য, আমরা পাঠ্যের একটি অনুচ্ছেদ লিখব এবং অনুচ্ছেদের প্রারম্ভে একটি চিত্র যুক্ত করব (পাঠ্যের আগে, কিন্তু খোলার পরে
ট্যাগ) এখানে যে এইচটিএমএল মার্কআপটি দেখায়:
ডিফল্টরূপে, আমাদের ওয়েবপৃষ্ঠাটি পাঠ্যের উপরে চিত্রের সাথে প্রদর্শন করবে। এটি এইচটিএমএল-এর ব্লক-লেভেল উপাদান। এর মানে হল যে ব্রাউজার ডিফল্ট অনুসারে ইমেজ এলিমেন্টের আগে এবং পরে লাইন বিরতি প্রদর্শন করে। আমরা সিএসএস চালু করে এই ডিফল্ট চেহারা পরিবর্তন করব। প্রথমত, যাইহোক, আমরা আমাদের ইমেজ এলিমেন্টে একটি ক্লাস মান যুক্ত করব। যে ক্লাসটি "হুক" হিসাবে কাজ করবে যেটি আমরা আমাদের CSS এ ব্যবহার করব।
লক্ষ্য করুন যে এই বর্গ "বাম" তার নিজস্ব কিছুই কিছুই করে না! আমাদের জন্য আমাদের পছন্দসই শৈলী অর্জন, আমরা পরবর্তী CSS ব্যবহার করতে হবে।
CSS শৈলী
আমাদের বামে "বাম" বর্গের বৈশিষ্ট্য সহ আমাদের এইচটিএমএল সহ, আমরা এখন CSS এ ফিরে যেতে পারি। আমরা আমাদের স্টাইলশীটে একটি নিয়ম যুক্ত করব যা সেই ছবিটিকে ভাসতে সাহায্য করবে এবং এটির পাশে একটি সামান্য প্যাডিং যোগ করবে যাতে করে ছবিটির চারপাশে যে টেক্সটটি ভাসবে সেটি খুব ঘনিষ্ঠভাবে তার বিরুদ্ধে করা যাবে না। এখানে আপনি লিখতে পারেন সিএসএস:
.left {float: left; প্যাডিং: 0 ২0px ২0px 0; }এই শৈলীটি বামে যে ছবিটি ভাসছে এবং চিত্রের ডানদিকের নীচের অংশে একটি ছোট প্যাডিং (কিছু CSS শর্টহ্যান্ড ব্যবহার করে) যোগ করে।
যদি আপনি একটি ব্রাউজারে এই এইচটিএমএলটি অন্তর্ভুক্ত পৃষ্ঠাটি পর্যালোচনা করেন, তবে ছবিটি এখন বাম পাশে সংযুক্ত হবে এবং অনুচ্ছেদের পাঠ্যটি ডানদিকে প্রদর্শিত হবে এবং উভয়ের মধ্যে একটি যথোপযুক্ত পরিমাণের সাথে থাকবে। উল্লেখ্য যে আমরা ব্যবহার করা "বাম" ক্লাস মান নির্বিচারে হয়। আমরা এটা কিছু বলে থাকতে পারতাম কারণ "বাম" শব্দটি তার নিজস্ব কিছুই করে না। এইচটিএমএল এর একটি ক্লাস অ্যাট্রিবিউট থাকা প্রয়োজন যা প্রকৃত সিএসএস স্টাইলের সাথে কাজ করে যা আপনি যে দৃষ্টিভঙ্গি পরিবর্তন করতে চান তা নির্দেশ করে।
এই শৈলী অর্জন বিকল্প উপায়
ইমেজ এলিমেন্টকে একটি ক্লাস অ্যাট্রিবিউট প্রদানের পদ্ধতি এবং তারপর একটি সাধারণ সিএসএস শৈলী ব্যবহার করে যা উপাদানটি তোলার জন্য শুধুমাত্র একটি উপায়ে আপনি এই "বাম প্রান্তিক ইমেজ" চেহারাটি সম্পন্ন করতে পারেন। আপনি ইমেজের ক্লাস ভ্যালু বন্ধ করে নিতে পারেন এবং এটি সিএসএস এর মাধ্যমে স্টাইল করতে পারেন। উদাহরণস্বরূপ, আসুন একটি উদাহরণ দেখি যেখানে এই চিত্র একটি বিভাগের ভিতর "প্রধান-সামগ্রী" এর একটি ক্লাস মান সহ।
এই ছবিটি শৈলীতে, আপনি এই CSS লিখতে পারেন:
.main- সামগ্রী img {ফ্লোট: বাম; প্যাডিং: 0 ২0px ২0px 0; }এই sceario মধ্যে, আমাদের ইমেজ আগে মত এটি ভাসমান টেক্সট, বাম পাশে সংযুক্ত করা হবে, কিন্তু আমাদের মার্কআপ একটি অতিরিক্ত ক্লাস মান যোগ করার প্রয়োজন ছিল না। স্কেলে এই কাজ করা একটি ছোট HTML ফাইল তৈরি করতে সাহায্য করতে পারে, যা পরিচালনা করা সহজ হবে এবং কার্য সম্পাদন উন্নত করতে সহায়তা করতে পারে।
অবশেষে, আপনি এমনকি আপনার এইচটিএমএল মার্কআপে সরাসরি স্টাইল যুক্ত করতে পারেন, যেমন:
এই পদ্ধতিটি " ইনলাইন স্টাইল " বলা হয়। এটা যুক্তিযুক্ত নয় কারণ এটি পরিষ্কারভাবে তার স্ট্রাকচারাল মার্কআপ সহ একটি উপাদান শৈলী সম্মিলন। ওয়েব সেরা অভ্যাসগুলি নির্দেশ করে যে একটি পৃষ্ঠাটির শৈলী এবং কাঠামো আলাদা থাকা উচিত। এটি বিশেষভাবে সহায়ক যখন আপনার পৃষ্ঠাকে তার লেআউটটি পরিবর্তন করতে হবে এবং একটি প্রতিক্রিয়াশীল ওয়েবসাইটের সাথে বিভিন্ন স্ক্রিন মাপ এবং ডিভাইসগুলির সন্ধান করতে হবে। এইচটিএমএল-তে বিনিমেয় পৃষ্ঠাটির শৈলী থাকার ফলে মিডিয়াগুলির প্রশ্নগুলি লেখার জন্য এটি আরও কঠিন হয়ে যাবে যেগুলি তাদের বিভিন্ন স্ক্রিনগুলির জন্য প্রয়োজনীয় আপনার সাইটের চেহারাকে সামঞ্জস্য করবে।
জনিফার ক্রাইনিনের মূল রচনা 4/3/17 এ জেরেমি গিয়ার্ড দ্বারা সম্পাদিত