HTML স্প্যান:নতুনদের জন্য একটি গাইড

নিম্নলিখিত বিভাগে, আমরা কয়েকটি উদাহরণের মধ্য দিয়ে হেঁটে যাবো যা ব্যাখ্যা করে কিভাবে ট্যাগ HTML এ কাজ করে।

ট্যাগ HTML উদাহরণ

ব্যবহার করে এমন কোডের কয়েকটি উদাহরণের মাধ্যমে চলুন HTML এ স্টাইল ইনলাইন উপাদান ট্যাগ. আমাদের প্রথম উদাহরণ ব্যবহার করবে একটি অনুচ্ছেদে ট্যাগ; আমাদের দ্বিতীয় উদাহরণ এটি একটি তালিকায় ব্যবহার করবে।

একটি অনুচ্ছেদে HTML

ধরুন আমরা একটি স্থানীয় বেকারি-প্রিঙ্গল অ্যান্ড সন্স বেকারির জন্য একটি ওয়েব পেজ ডিজাইন করছি। এই ওয়েব পৃষ্ঠাটি বেকারির ইতিহাসের রূপরেখা দেবে। বেকারির মালিক, মিঃ প্রিঙ্গল, লাল টেক্সটের সাথে কিছু মূল তথ্যের উপর জোর দিতে বলেছেন।

আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:

index.html

<p>Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves <span class="redText">delicious baked goods</span> and coffee to the Oakbridge area. It has served <span class="redText">thousands</span> of customers since its foundation.</p>

styles.css

.redText {
color: red;
}

আমাদের কোড ফিরে আসে:

আমাদের উদাহরণে, আমরা "সুস্বাদু বেকড পণ্য" এবং "হাজার" শব্দগুলির উপর জোর দিয়েছি। মিঃ প্রিংল আমাদের বলেছিলেন যে এই পদগুলি গুরুত্বপূর্ণ, তাই আমরা প্রোগ্রামটিকে সেগুলিকে লাল রঙে প্রদর্শন করার নির্দেশ দিয়েছি৷

আমরা

এর মধ্যে আবদ্ধ পাঠ্যের একটি স্ট্রিং সংজ্ঞায়িত করেছি এইচটিএমএল ট্যাগ। এই লেখাটি প্রিঙ্গল অ্যান্ড সন্স বেকারির ইতিহাস তুলে ধরেছে। তারপর, আমরা -এ লাল রঙে দেখাতে চাই এমন পদগুলিকে সংযুক্ত করেছি ট্যাগ।

আমাদের CSS ফাইলে, আমরা উল্লেখ করেছি যে redText ক্লাসে নির্ধারিত যেকোনো উপাদানের রঙ লাল হওয়া উচিত। যখন আমরা ব্যবহার করি তখন এটি আমাদের পাঠ্যের রঙকে লালে পরিবর্তন করতে দেয়। ট্যাগ।

ট্যাগ এই ক্ষেত্রে দরকারী কারণ আমরা আমাদের পাঠ্যে শুধুমাত্র নির্দিষ্ট শব্দের উপর জোর দিতে চেয়েছিলাম। আমরা

-এ লাল টেক্সট স্টাইলিং প্রয়োগ করতে পারতাম নিজেকে ট্যাগ করুন। কিন্তু, এর ফলে লাল টেক্সটের একটি সম্পূর্ণ অনুচ্ছেদ হবে।

একটি তালিকায় HTML

ধরুন প্রিঙ্গল অ্যান্ড সন্স বেকারি আমাদেরকে তাদের সোশ্যাল মিডিয়া পৃষ্ঠাগুলির লিঙ্ক সহ তাদের ওয়েবসাইটে একটি তালিকা যোগ করতে বলেছে৷

বেকারি উল্লেখ করেছে যে তাদের টুইটার এবং ফেসবুক পৃষ্ঠাগুলির লিঙ্কগুলি বিশেষভাবে গুরুত্বপূর্ণ কারণ দলটি সেই প্ল্যাটফর্মগুলিতে সবচেয়ে সক্রিয়। তাই, তারা চায় যে আমরা সেই লিঙ্কগুলিকে হালকা নীল রঙের টেক্সটে হাইলাইট করি।

আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:

index.html

<ul>
	<li><span class="blue"><a href="twitter.com">Twitter</a></span></li>
	<li><span class="blue"><a href="facebook.com">Facebook</a></span></li>
	<li><a href="instagram.com">Instagram</a></li>
</ul>

styles.css

.blue {
	background: lightblue;
}

আমাদের কোড ফিরে আসে:

আমাদের HTML কোডে, আমরা

ব্যবহার করে একটি ক্রমবিহীন তালিকা তৈরি করেছি ট্যাগ এই তালিকায় তিনটি আইটেম রয়েছে, যার প্রতিটি
• -এর মধ্যে রয়েছে ট্যাগ।

  টুইটার এবং Facebook-এর জন্য তালিকা আইটেমগুলি HTML স্প্যান ট্যাগের ( এবং ) মধ্যে আবদ্ধ। প্রতিটি তালিকা আইটেমের জন্য খোলার স্প্যান ট্যাগ একটি ক্লাস অ্যাট্রিবিউট নির্দিষ্ট করে। ক্লাস অ্যাট্রিবিউটের মান হল "নীল"৷

  ৷

  আমরা .blue নামক একটি শৈলী সংজ্ঞায়িত করেছি যা হালকা নীল রঙে প্রয়োগ করা যেকোনো উপাদানের পটভূমির রঙ পরিবর্তন করে। এর ফলে আমাদের HTML কোডে CSS ক্লাস .blue-এর সাথে সমস্ত লিঙ্কের পটভূমির রঙ হালকা নীলে পরিবর্তিত হয়েছে।

  আমাদের Instagram লিঙ্কের সাথে যুক্ত ব্যাকগ্রাউন্ডের রঙ পরিবর্তিত হয়নি কারণ আমরা এর মধ্যে সেই লিঙ্কটির জন্য পাঠ্য আবদ্ধ করিনি ট্যাগ।

  উপসংহার

  HTML ট্যাগ হল একটি সাধারণ ধারক যা একটি HTML পৃষ্ঠায় নির্দিষ্ট উপাদানগুলিতে শৈলী প্রয়োগ করতে ব্যবহৃত হয়। ডিফল্টরূপে, ট্যাগ কিছুই করে না, তবে উপাদানগুলিতে শৈলী প্রয়োগ করতে এটি CSS-এর সাথে একত্রে ব্যবহার করা যেতে পারে।

  একটি চ্যালেঞ্জ হিসাবে, একটি ট্যাগ সংজ্ঞায়িত করুন যা একটি বাক্যে একটি শব্দকে সমস্ত বড় অক্ষরে উপস্থিত করে। আপনার ট্যাগ দিয়ে লেখাটিকে বড় হাতের অক্ষরে রূপান্তর করতে আপনাকে একটি CSS নিয়ম ব্যবহার করতে হবে।

  এই টিউটোরিয়ালে উদাহরণ সহ আলোচনা করা হয়েছে কিভাবে HTML <span> ব্যবহার করতে হয় আপনার কোডে ট্যাগ করুন। আপনি এখন ব্যবহার শুরু করতে প্রস্তুত৷ একজন পেশাদার ওয়েব ডেভেলপারের মত ট্যাগ করুন!

  এইচটিএমএল কিভাবে শিখতে হয় তার নির্দেশিকা এবং সহায়তার জন্য, আমাদের সম্পূর্ণ এইচটিএমএল গাইডটি পড়ুন।