Skip to main content

ওয়েব ডিজাইনে সিএসএস সহ স্প্যান এবং ডিভ এইচটিএমএল এলিমেন্ট ব্যবহার করা হচ্ছে

এইচটিএমএল ভিডিও টিউটোরিয়াল - 82 - এইচটিএমএল বিঘত ট্যাগ বনাম DIV ট্যাগ (জুন 2025)

এইচটিএমএল ভিডিও টিউটোরিয়াল - 82 - এইচটিএমএল বিঘত ট্যাগ বনাম DIV ট্যাগ (জুন 2025)

সুচিপত্র:

Anonim

ওয়েব ডিজাইন এবং এইচটিএমএল / সিএসএসে নতুন যারা অনেক মানুষ ব্যবহার এবং

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

ব্যবহার করে
উপাদান

DIV উপাদান আপনার ওয়েব পৃষ্ঠায় যৌক্তিক বিভাগ সংজ্ঞায়িত করে। এটি মূলত একটি বাক্স যার মধ্যে আপনি অন্য HTML উপাদানগুলি যৌক্তিকভাবে একসাথে যেতে পারেন। একটি বিভাগে অনুচ্ছেদ, শিরোনাম, তালিকা, লিঙ্ক, চিত্র ইত্যাদির মতো এটিতে একাধিক অন্যান্য উপাদান থাকতে পারে। এটিতে আপনার HTML নথিতে অতিরিক্ত কাঠামো এবং সংস্থান সরবরাহ করার জন্য এটির অন্যান্য বিভাগও থাকতে পারে।

ডিভি উপাদান ব্যবহার করতে, একটি খোলা রাখুন

আপনার পৃষ্ঠার ক্ষেত্রের আগে ট্যাগ করুন যা আপনি একটি পৃথক বিভাগ হিসাবে এবং একটি ঘনিষ্ঠ হিসাবে চান
এটির পরে ট্যাগ করুন:

div বিষয়বস্তু

যদি আপনার পৃষ্ঠার এলাকার কিছু অতিরিক্ত তথ্য দরকার যা আপনি সিএসএসের সাথে শৈলীতে ব্যবহার করতে চান তবে আপনি একটি আইডি নির্বাচক (উদাঃ,

আইডি = "myDiv">

), অথবা একটি বর্গ নির্বাচক (উদাঃ,

বর্গ = "bigDiv">

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

ডিভি উপাদানটি HTML5 বিভাগের উপাদান থেকে আলাদা, কারণ এটি কোনও সীমাবদ্ধ সামগ্রীর সাথে সংযুক্ত উপাদানটি দেয় না। যদি আপনি নিশ্চিত না হন যে সামগ্রীটির ব্লক কোন বিভাগ বা বিভাগ হতে পারে তবে উপাদানটি এবং সামগ্রীটির উদ্দেশ্য কী কী ব্যবহার করতে হয় তা নির্ধারণ করতে সহায়তা করুন।

  • পৃষ্ঠার সেই এলাকার শৈলী যোগ করার জন্য যদি আপনার কেবল উপাদানটির প্রয়োজন হয়, তবে আপনাকে ডিভ উপাদানটি ব্যবহার করতে হবে।
  • যদি বিষয়বস্তুটি অন্তর্গত থাকে তবে এটি একটি স্বতন্ত্র ফোকাস এবং এটি নিজের উপর দাঁড়াতে পারে তবে আপনি পরিবর্তে বিভাগের উপাদানটি ব্যবহার করতে পারেন।

অবশেষে, ডিভ এবং বিভাগ উভয়ই একই রকম আচরণ করে এবং আপনি তাদের কোনওটি আপনার বৈশিষ্ট্যটি দেখতে পেতে CSS এর সাথে বৈশিষ্ট্যগুলি মানতে এবং তাদের স্টাইল দিতে পারেন। এই দুটি ব্লক স্তর উপাদান।

ব্যবহার করে উপাদান

স্প্যান উপাদানটি ডিফল্টরূপে একটি ইনলাইন উপাদান। এটি div এবং বিভাগ উপাদান থেকে পৃথক সেট করে। স্প্যান উপাদানটি প্রায়ই একটি অতিরিক্ত "হুক" দিতে স্ট্যাটাসের একটি নির্দিষ্ট অংশ, সাধারণত পাঠ্য মোড়ানো হয়, যা পরে স্টাইল করা যেতে পারে। সিএসএস দিয়ে ব্যবহৃত হয়, এটি সংযুক্ত করা টেক্সটের স্টাইল পরিবর্তন করতে পারে; যাইহোক, কোন স্টাইল বৈশিষ্ট্য ছাড়া, একা স্প্যান উপাদান শুধুমাত্র টেক্সট উপর কোন প্রভাব আছে।

এই দৈর্ঘ্য এবং div উপাদান মধ্যে প্রধান পার্থক্য। উপরে উল্লিখিত হিসাবে, ডিভ উপাদানটিতে অনুচ্ছেদের বিরতি রয়েছে, তবে স্প্যান উপাদান কেবল ব্রাউজারটিকে সংশ্লিষ্ট CSS স্টাইলের নিয়মগুলি প্রয়োগ করতে বলে ট্যাগ:

হাইলাইট টেক্সট এবং অ হাইলাইট টেক্সট।

যুক্ত করুন

বর্গ = "হাইলাইট"

বা CSS এর সাথে পাঠ্য শৈলীতে স্প্যান উপাদানতে অন্য বর্গ (উদাঃ,

বর্গ = "হাইলাইট">

)। স্প্যান উপাদানটিতে কোনও প্রয়োজনীয় বৈশিষ্ট্য নেই, তবে তিনটি সবচেয়ে বেশি কার্যকর যা ডিভ উপাদানগুলির মতো একই।

  • শৈলী
  • শ্রেণী
  • আইডি

দস্তাবেজে একটি নতুন ব্লক-স্তর উপাদান হিসাবে বিষয়বস্তুটি সংজ্ঞায়িত না করে আপনি সামগ্রীটির শৈলী পরিবর্তন করতে চান এমন সময় ব্যবহার করুন।

উদাহরণস্বরূপ, যদি আপনি H3 শিরোনামের দ্বিতীয় শব্দটি লাল হতে চান, তবে আপনি সেই শব্দটিকে ঘন ঘন উপাদান দ্বারা ঘিরে ফেলতে পারেন যা লাল শব্দ হিসাবে শব্দটিকে স্টাইল করবে। শব্দ এখনও h3 উপাদান অংশ অবশেষ, কিন্তু এখন লাল প্রদর্শিত হয়:

এটি আমার দুর্দান্ত শিরোনাম