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