একটি ইমেজ কাছাকাছি পাঠ্য মোড়ানো কিভাবে

যেকোনো ওয়েবপৃষ্ঠাটি দেখুন এবং আপনি পাঠ্য সামগ্রী এবং চিত্রাবলী সংমিশ্রণ দেখতে পাবেন। এই দুটি উপাদান একটি ওয়েবসাইটের সাফল্যের অপরিহার্য উপাদান। পাঠ্য বিষয়বস্তুটি কি সাইট দর্শকরা পড়বে এবং সার্চ ইঞ্জিনগুলি তাদের র্যাঙ্কিং এলগরিদমের অংশ হিসেবে কী ব্যবহার করবে । চিত্রগুলি সাইটে চাক্ষুষ আগ্রহ যুক্ত করবে এবং পাঠ্য সামগ্রীকে আরও প্রসারিত করতে সহায়তা করবে।

ওয়েবসাইট থেকে টেক্সট এবং ইমেজ যুক্ত করা সহজ। পাঠ্যগুলি মানক এইচটিএমএল ট্যাগগুলির সাথে যুক্ত করা হয়েছে যেমন অনুচ্ছেদ, শিরোনাম এবং তালিকা, যখন ছবিগুলি এলিমেন্ট সহ একটি পৃষ্ঠায় স্থাপন করা হয় একবার আপনি আপনার ওয়েব পৃষ্ঠায় একটি ছবি যোগ করেছেন, তবে, আপনি নীচের উপরিভাগের পরিবর্তে ইমেজটির পাশে পাঠ্য প্রবাহ রাখতে চান (যা ডিফল্ট উপায় যা HTML কোডে জোড়া হয়েছে এমন একটি ব্রাউজার ব্রাউজারে উপস্থাপিত হবে)। টেকনিক্যালি, আপনি এই চেহারাটি অর্জন করতে পারেন এমন দুটি উপায় আছে, সিএসএস (প্রস্তাবিত) ব্যবহার করে অথবা এইচটিএমএলতে সরাসরি দৃশ্যমান নির্দেশাবলী যুক্ত করে (আপনার ওয়েবসাইটের জন্য শৈলী এবং কাঠামোর বিভাজনকে বজায় রাখতে চাইলে সুপারিশ করা হবে না)।

CSS ব্যবহার করে

একটি পৃষ্ঠার পাঠ্য এবং চিত্র বিন্যাস এবং ব্রাউজারে তাদের চাক্ষুষ শৈলীগুলি কীভাবে প্রদর্শিত হবে তা পরিবর্তন করার সঠিক উপায়টি CSS এর সাথে । শুধু মনে রাখবেন, যেহেতু আমরা পৃষ্ঠায় একটি ভিজ্যুয়াল পরিবর্তনের কথা বলছি (একটি চিত্রের চারপাশে টেক্সট প্রবাহ তৈরি করা), এর মানে হল এটি ক্যাসকেডিং স্টাইল শীটগুলির ডোমেন।

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

সিএসএস এর পরিবর্তে এইচটিএমএল ব্যবহার করা (এবং কেন আপনি এটা করবেন না)

যদিও এইচটিএমএর সাথে একটি ছবির চারপাশে টেক্সট পাঠানো সম্ভব, তবে ওয়েব স্ট্যান্ডার্ডগুলি নির্দেশ করে যে সিএসএস (এবং উপরে দেওয়া ধাপগুলি) যাওয়ার উপায় হল যাতে আমরা কাঠামো (এইচটিএমএল) এবং স্টাইল (CSS) এর পৃথকীকরণ বজায় রাখতে পারি। এটি বিশেষত গুরুত্বপূর্ণ যখন আপনি বিবেচনা করেন যে, কিছু ডিভাইস এবং লেআউটগুলির জন্য, সেই পাঠ্যটি ইমেজটির চারপাশে প্রবাহিত করতে হবে না । ছোট স্ক্রিনগুলির জন্য, একটি প্রতিক্রিয়াশীল ওয়েবসাইটের লেআউটের প্রয়োজন হতে পারে যে পাঠ্যটি প্রকৃতপক্ষে ছবিটি নীচের অংশে সারিবদ্ধ করে এবং ছবিটি পর্দার পূর্ণ প্রস্থকে প্রসারিত করে। আপনার এইচটিএমএল মার্কআপ থেকে আলাদা হলে এটি মিডিয়া ক্যোয়ারী দিয়ে সহজেই করা যায়। আজকের মাল্টি-ডিভাইস জগতে, যেখানে বিভিন্ন দর্শক এবং বিভিন্ন স্ক্রিনে ইমেজ এবং টেক্সট ভিন্নভাবে প্রদর্শিত হবে, এই ওয়েব সাইটটি দীর্ঘমেয়াদী সাফল্যের জন্য এবং ওয়েব পৃষ্ঠার পরিচালনার জন্য এই বিচ্ছেদটি অপরিহার্য।