এইচটিএমএল লেখার জন্য বিভিন্ন সময় বিভিন্ন প্রয়োজনে এট্রিবিউট ইউজ করা হয় | সর্বদা স্মল লেটার এ লেখা ভালো কোথাও এটার ক্যাপিটাল লেটার লিখলেও প্রবলেম হবে না | তবে সর্বদা ছোট হাতের অক্ষর ব্যবহার করলে দেখতে সুন্দর লাগে |
HTML Attributes নিয়ে আমাদের টিউটোরিয়াল দেখুনঃ-
আজকের এই চ্যাপ্টার থেকে আপনি যা যা শিখতে পারবেন-
- এইচটিএমএল এট্রিবিউট কি
- সবথেকে বেশি ব্যবহৃত এট্রিবিউট এল লিস্ট
- হাইড এবং ওয়েট এক্টিভেট
- অল্টার এট্রিবিউট কেন ব্যবহার করা হয়
- চারসেট এট্রিবিউট কেন ব্যবহার করা হয়
- হারফ এট্রিবিউট
- সার্চ এট্রিবিউট
- স্টাইল এট্রিবিউট
- টাইটেল এট্রিবিউট
- কোট এট্রিবিউট
এইচটিএমএল এট্রিবিউট কি ?
এট্রিবিউট হচ্ছে এইচটিএমএল মার্কআপ ল্যাংগুয়েজ একটি অবিচ্ছেদ্য অংশ যার মাধ্যমে এইচটিএমএল ল্যাঙ্গুয়েজের আকার, ধরন, ডিজাইনসহ বিভিন্ন ধরনের পরিবর্তন প্রদর্শন করা হয় | যেমন, অল্টার একটি এট্রিবিউট যার মাধ্যমে কোন ইমেজ যদি না করে তাহলে তার অল্টারনেটিভ হিসেবে একটি লেখা শো করবে |
এইচটিএমএল এ সবথেকে বেশি ব্যবহৃত এট্রিবিউট লিস্ট [ HTML Attributes List ]
- Charset – এই অ্যাপটি বিউটি মেয়েটাকে ব্যবহৃত হয় যার মাধ্যমে যেকোনো ক্যারেক্টার কে এনকোডিং করা হয় |
- Lang – লাইনের মাধ্যমে ওয়েবপেজের ভাষা নির্ধারণ করা হয় |
- Href – যে কোন লিঙ্গের ইউআরএল সেট করতে href এট্রিবিউট টি ব্যবহার করা হয় |
- Alt– এই ওয়েবসাইটের মাধ্যমে যদি কোন ইমেজ দেখা না গেলে তার অল্টারনেটিভ হিসেবে লেখা শো করানো যায় |
- Title – এই এট্রিবিউট এর মাধ্যমে যেকোনো ওয়েবপেজের অতিরিক্ত তথ্য ধারণ করা যায় | এছাড়া টাইটেল এর উপর যদি মাউস পয়েন্টার রাখা হয় তাহলে এর কন্টাক্ট গুলো করে |
- Src– এই অ্যাটিটিউড এর মাধ্যমে যেকোন ইমেজ এর সোর্স নির্দেশ করা হয় |
- Style – এটি সাধারণত ইনলাইন স্টাইল এর ক্ষেত্রে ব্যবহার করা হয় |
- Width & height – এই এট্রিবিউট গুলোর মাধ্যমে ইমেজের সাইজ নির্ধারণ করে দেওয়া যায় |
Height এবং width এট্রিবিউট
যে কোন ওয়েব পেজ তৈরি করার জন্য সেই পেজে যখন ইমেজ আপলোড করা হয় সেই ইমেজের সাইজ নির্ধারণ করার ক্ষেত্রে হাইট এন্ড ওয়েট এট্রিবিউট ব্যবহার করা হয় |
এই এটি ব্যবহারের মাধ্যমে ইমেজটি যেকোন ওয়েব পেজে সুন্দরভাবে সেটআপ করা সম্ভব হয় |
যদি আমরা একটি উদাহরণের মাধ্যমে দেখি তাহলে, আমরা যদি একটি ওয়েব পেজে যে কোন একটি ইমেজ সেটআপ করতে চাই এবং ইমেজের সাইজ নির্ধারণ করতে চাই তাহলে কিভাবে সেটা করতে হবে –
<img src=“1.jpg” height=“300” width=“300”>
তাহলে এই ত্যাগের মাধ্যমে ওই মিষ্টি ব্রাউজার আপনার নির্ধারিত সাইজ অনুযায়ী শো করবে | যদি ব্রাউজারে ভিউ করি তাহলে ইমেজটি যেভাবে দেখা যাবেঃ-
এখান থেকে আমরা বুঝতে পারলাম, এট্রিবিউট ব্যবহার করে কিভাবে একটি ইমেজের হাইট এবং ওয়েট সেটআপ করে ইমেজ সাইজ কে ঠিক করতে হয় |
অল্টার এট্রিবিউট কেন ব্যবহার করা হয়
যখন আমরা কোনো ওয়েবপেজ তৈরী করি তখন ওয়েবপেজের প্রয়োজনে আমরা বিভিন্ন ধরনের ইমেজ ব্যবহার করি | যা যেকোনো ওয়েব পেজকে ইউনিক করতে সাহায্য করে | কিন্তু ব্রাউজার এ সমস্যার কারণে বা নেটের স্পিড কম থাকার জন্য বিভিন্ন সময়ে এই ইমেজ লোড হতে অনেক সময় নেয় এবং এরর দেখায়, তখনই প্রয়োজন হয় অল্টার এট্রিবিউট এর | যদি কোন ইমেজ লোড হতে সময় নেয় তাহলে অল্টারনেটিভ ইমেজের রিলেটেড টেক্সট শো করানোর জন্য অল্টারনেটিভ এট্রিবিউট ব্যবহার করা হয় |
যদি আমরা একটি উদাহরণের মাধ্যমে এটি দেখি তাহলে, অল্টারনেটিভ এট্রিবিউট সেট করার প্রচেষ্টা এভাবেই হবেঃ-
<img src=”1.jpg” alt =”html attribute”>
যার মাধ্যমে ইমেজ দেখা না গেলেও অল্টারনেটিভ টেক্সট শো করবে |
তাহলে এখান থেকে বোঝা গেল কিভাবে টেক্সট সেট করতে হয় এবং এর ব্যবহার |
Charset এট্রিবিউট কেন ব্যবহার করা হয়
Charset এটিটিউড মূলত মেটা ট্যাগ এর মধ্যে ক্যারেক্টার ইন কোডিং এর ক্ষেত্রে ব্যবহার করা হয় | ইংরেজি ছাড়া যেকোন ভাষাকে যেকোন ব্রাউজারে সঠিকভাবে দেখানোর ক্ষেত্রে এই এট্রিবিউট ব্যবহার করা হয় |
ইংরেজি বাদে অন্য যেকোন ল্যাঙ্গুয়েজ এক্ষেত্রে Charset হিসেবে utf-8 সর্বদা ব্যবহার করা হয় |
তাহলে চলুন একটি উদাহরণের মাধ্যমে আমরা এই অ্যাট্রিবিউট এর ব্যবহার দেখে নেয়ঃ-
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>
Html tutorial
</title>
</head>
<body>
<p>Charset এটিটিউড মূলত মেটা ট্যাগ এর মধ্যে ক্যারেক্টার ইন কোডিং <br>এর ক্ষেত্রে ব্যবহার করা হয় | ইংরেজি ছাড়া <br>যেকোন ভাষাকে যেকোন ব্রাউজারে সঠিকভাবে দেখানোর ক্ষেত্রে<br> এই এট্রিবিউট ব্যবহার করা হয় |</p>
</body>
</html>
উপরের আলোচনা থেকে এটা বলা যায় যে, ইংরেজি বাদে যেকোনো একটি ল্যাঙ্গুয়েজ কে সঠিকভাবে ওয়েব ব্রাউজারে প্রদর্শন করার ক্ষেত্রে charset হিসেবে ইউ টি এফ – 8 ব্যবহার করা কতটা গুরুত্বপূর্ণ |
Href এট্রিবিউট
ওয়েব পেজে বিভিন্ন ধরনের লিংক নির্দেশ করার জন্য হারফ এট্রিবিউট ব্যবহার করা হয় | এটি মূলত <a> ট্যাগ এর মধ্য সেটআপ করা হয় | তাছাড়া <area>, <base>, <link> ট্যাগ এ ও মাঝে মাঝে ব্যবহার করা হয়
চলুন তাহলে একটি উদাহরনের মাধ্যমে href এট্রিবিউট এর ব্যবহার দেখে নেওয়া যাক,
<a href=”https://wigmarketing.com/”> Visit our digital services site </a>
এটি যদি ব্রাউজারে রান করানো হয় তাহলে ইন্টারফেসটি যেমন আসবে –
ব্রাউজারের এই লিংকে ক্লিক করলে আপনি এখানে যে লিঙ্কটি ইনসাইড করবেন এই লিংকে আপনাকে এরেস্ট করে নিয়ে যাবে | এভাবে আপনি href এট্রিবিউট ব্যবহার করে আপনার যেকোনো ওয়েব পেজের মধ্যে যে কোন লিংকে ইনসার্ট করাতে পারেন |
সার্চ এট্রিবিউট
এইচটিএমএল মার্কআপ ল্যাংগুয়েজ এর মাধ্যমে যে পেজগুলো তৈরি করা হয় তারমধ্যে ইমেজ এবং স্ক্রিপ্টের সোর্স ফাইল নির্দেশ করার জন্য সার্চ এট্রিবিউট ব্যবহার করা হয় |
এখানে দুই ধরনের সোর্স এট্রিবিউট রয়েছে যার মাধ্যমে এক্সটার্নাল এবং ইন্টারনাল ইউ আর এল ইনসাইড করানো যায় | অ্যাক্টিভিটি হচ্ছে
- অ্যাবসোলুট ইউ আর এল
- রিলেটিভ ইউ আর এল
চলুন তাহলে সার্চ এট্রিবিউট এর ব্যবহার দেখে নেওয়া যাকঃ-
<img src=”1.jpg”>
তাহলে এখান থেকে বোঝা গেল কিভাবে যেকোনো ইউআরএল এর সোর্স এড করা যায় সোর্স এট্রিবিউট এর মাধ্যমে |
টাইটেল এট্রিবিউট
এইচটিএমএল এ টাইটেল এট্রিবিউট মূলত একটি টুলটিপ হিসেবে ব্যবহার করা হয় যে কোন ডকুমেন্ট এর মধ্যে যা মাউস কার্সর হোবার করলে প্রদর্শিত হয় |
উদাহরণস্বরূপ টাইটেল অ্যাক্টিভিটি দেখা যাকঃ-
<p title=’This is a title attribute’></p>
স্টাইল এট্রিবিউট
এইচটিএমএল ট্যাগ এর মধ্যে কালার,ফন্ট, font-size, font-family, হাইট, ওয়েট, ইত্যাদি ব্যবহার করার জন্য স্টাইল এট্রিবিউট ব্যবহার করা |
মূলত ওয়েব পেজে কালার ফন্ট ফন্ট সাইজ ফর ফ্যামিলি ব্যাকগ্রাউন্ড কালার এসব ব্যাবহার করার জন্য সিএসএস ব্যবহার করা হয় তবে এইচটিএমএল ডকুমেন্ট এর মধ্যেও স্ট্যান্ড ব্যবহার করে এই কাজগুলোকে ইন্টার্নাল ভাবে করে নেওয়া যায় |
চলুন তাহলে উদাহরণের মাধ্যমে স্টাইল এট্রিবিউট দেখে নেওয়া যাকঃ-
<p style=”color: red;”> This is a html tutuorial chapter 5. Here I will try to learn more about html attribute.</p>
আউটপুট ব্রাউজারে দেখতে চাইলে তাহলে আউটপুট নিচের ইমেজ এর মত আসবে
এখান থেকে বুঝতে পারলাম কিভাবে এইচটিএমএল এর স্টাইল এট্রিবিউট কাজ করে |
কোটেশন এট্রিবিউট
এইচটিএমএল মার্কআপ ল্যাংগুয়েজ লেখার সময় বিভিন্ন প্রয়োজনে কোটেশন ব্যবহার করা হয় | এখানে আমরা সিঙ্গেল কোর্ট(‘’) অথবা ডাবল কোট (“”) যেকোনো একটি ব্যবহার করতে পারি তবে ম্যাক্সিমাম ক্ষেত্রে ব্যবহার করা হয় |
তবে সিঙ্গেল নাকি ডাবল কোট সেটি প্রয়োজন অনুসারে ব্যবহার করা হয় |
চলুন আমরা কোটেশন এর ব্যবহার দেখেনিঃ-
<p title=”WIgMarketing Digital Solution”>This is a pragraph</p>
<p title=’This is a Digital service provider company’>This isa another paragraph </p>
এখান থেকে বোঝা গেল, যেকোনো এইচটিএমএল মার্কআপ ল্যাংগুয়েজ এর মাধ্যমে ওয়েব পেজ তৈরি করার ক্ষেত্রে সিঙ্গেল কবে ডাবল কোট যেকোনো একটি ব্যবহার করে ওয়েব পেজ তৈরি করা যায় |
এইচটিএমএল দিয়ে ওয়েব পেজ তৈরি করার জন্য এট্রিবিউট খুবই গুরুত্বপূর্ণ একটি অংশ | যার মাধ্যমে ওয়েবপেজে বিভিন্ন ধরনের এক্সট্রা ফিচার এড করা হয় | এট্রিবিউট সবসময় স্মল লেটার এ লিখতে হবে |
আজকের এই চ্যাপ্টারের যদি কোন বিষয়ে আপনার বুঝতে কোন ধরনের সমস্যা হয় অথবা এই চ্যাপ্টার সম্পর্কে আরো কোন কিছু জানার আগ্রহ থাকে তাহলে অবশ্যই কমেন্টে জানাবেন |
