All HTML Attributes (Part-1)
আমরা জানি যে html এর অনেকগুলো ট্যাগ রয়েছে এবং এই সকল ট্যাগের সমন্বয়ে আমরা ওয়েবসাইট বা কোন লেউআউট তৈরী করতে পারি। এই সকল html tag এর আবার অনেকগুলো attributes রয়েছে। এই attributes এর মাধ্যমে html tag গুলোকে আরো ব্যবহার উপযোগী করা যায় বা আরো নতুন নতুন তথ্য প্রদান করা যায় এই attributes এর মাধ্যমে।
আমরা জানি, h1 হলো একটি heading tag যা কোন একটি লেখাকে বড় করে দেখায়। যেমন-
<h1>Welcome to amarcourse.</h1>
আর এই heading tag টি ব্রাউজারে দেখাবে এই রকম –
এখন এই h1 tag কে আরো তথ্য সমৃদ্ধ করার জন্য আমরা attribute ব্যবহার করতে পারি। সব attribute কিন্তু আবার সব tag এ ব্যবহার করা যায় না।
attribute কিভাবে ব্যবহার করব?
attribute এর ব্যবহার করার নিয়ম হলো html tag এর opening tag এর ভিতরে attribute নাম লিখতে হবে এবং তার একটি value দিয়ে দিতে হবে। value টি অবশ্যই Double Quotes এর ভিতরে দিতে হবে। যেমন-
<some tag some-attribute="some attribute value"> </some tag>
তাহলে h1 heading tag এর জন্য যদি আমরা attribute হিসেবে title ব্যবহার করি তাহলে তা দেখতে হবে এই রকম-
<h1 title="amarcouse">Welcome to amarcourse.</h1>
এখানে,
<h1> হলো html heading tag এর opening tag
title হলো এই tag এর একটি attribute
amarcouse হলো এই attribute এর একটি value
</h1> হলো html heading tag এর closing tag
তাহলে, এই title attribute এর কাজ কি হলো? title attribute এর কাজ হলো কোন একটি html tag এর উপর আমরা যদি মাউস নিয়ে ধরে রাখি তাহলে ঐ attribute এর জন্য যে value টি দিয়েছিলাম তা দেখতে পাবো।
আপনি যদি ব্রাউজারে এখন উপরের কোডের আউটপুট টি দেখেন তাহল তা দেখতে হবে এই রকম-
উপরের ছবিতে আমরা দেখতে পাচ্ছি যে আমাদের মাউস যখন Welcome to amarcourse. এই লেখার উপর রেখেছি তখন ছোট করে একটি লেখা দেখা যাচ্ছে আর তা হলো amarcourse।
এটাই হলো title attribute এর কাজ। এই রকম আরো অনেক html attribute আছে।
চলুন আরো কিছু html attribute এবং এর কাজ দেখে আসি
href attribute
href attribute মূলত ব্যবহার করা হয় a tag এর hyperlink এর জন্য। a tag ব্যবহার করা হয় কোন একটি লেখা বা ছবিকে লিংক করার জন্য। এখন লিংক করলনে কিন্তু এই লিংকে ক্লিক করলে কোথায় যাবে? হ্যা, কোথায় যাবে তা সেট করার জন্য আমরা href attribute ব্যবহার করি। যেমন-
<a href="https://www.amarcourse.com">Go to Amarcourse website</a>
এখন আপনি যদি এই Go to Amarcourse website লিংকের উপর ক্লিক করেন তাহলে আপনি সাথে সাথেই এই https://www.amarcourse.com ঠিকানায় চলে যাবেন। এটাই হচ্ছে href attribute কাজ।
download attribute
এই download attribute টি মূলত hyperlink এর ক্ষেত্রে ব্যবহার করা হয়। যেমন ধরুন আমরা কোন একটি ছবি কে hyperlink বা লিংক করলাম a tag এর মাধ্যমে। এখন যদি আপনি এই ছবি কে Download করতে চান তাহলে শুধুমাত্র a tag এর ভিতরে এই download attribute টি দিতে হবে। তবে মনে রাখতে হবে যে download attribute ব্যবহার করতে হলে অবশ্যই href এর value থাকতে হবে কারন তা না হলে আপনি কি Download করবেন, তাই না? যেমন-
<a href="https://amarcourse.com/wp-content/uploads/2019/03/amarcourse-4-new-logo-1-1.png" download>Download Our Logo</a>
এখন ব্রাউজারে আপনি যখন Download Our Logo এই লিংকটিতে ক্লিক করবেন তখনই আপনার দেওয়ার href এর value মানে যা Download করতে চেয়েছিলেন তা সাথে সাথেই হয়ে যাবে।
তবে মনে রাখবেন এই href এর value অবশ্যই same website এর absoluate বা relative লিংক হতে হবে।
alt attribute
আমরা জানি যে, কোন ছবিকে দেখাতে হলে আমাদরেকে html এর img tag ব্যবহার করতে হবে। যেমন-
<img src="https://amarcourse.com/wp-content/uploads/2019/03/amarcourse-4-new-logo-1-1.png">
এখন আমরা যদি ব্রাউজারে এই কোডটি লোড দেই তাহলে আমার কোর্সের লোগো টা দেখতে পাবো। কারন src attribute এর value আমরা বলে দিয়েছি যে কোন ছবিটি কোথা থেকে আনতে হবে। মানে একটি লিংক দিয়েছি।
এখন মনে করুন যে, আমাদের দেওয়া src attribute এর value তে যে লিংক দিয়েছি তা আসলে খুজে পাওয়া যাচ্ছে না বা ভূল লিংক দিয়েছি। তাহলে কি ছবিটি দেখাবে? না, দেখাবে না। কারন আমাদের দেওয়া লিংক তো ভূল ছিল। তাহলে কি ছবির জায়গাটি খালিই থাকেবে? না খালি থাকলে তো কেমন দেখায় তাই না? আর এই খালি জায়গাটা যাতে না দেখায় বা যদি কোন কারনে কোন লিংক ভূল হয়ে থাকে তাহলে আমরা alt attribute ব্যবহার করতে পারি।
এই alt attribute এর কাজ হলো alternative একটি name দেওয়া যদি কখনো আমাদের দেওযা লিংকটি খুজে পাওয়া না যায়।
এক্ষেত্রে আমাদের দেওয়া ছবিটি যদি দেখা না যায় তাহলে তার পরিবর্তে alt attribute এ যা দিব তাই দেখা যাবে। যেমন-
<img src="https://amarcourse.com/wp-content/uploads/2019/03/amarcourse-4-new-logo-1-1.png" alt="Not found">
উপরের কোডে আমরা দেখতে পাচ্ছি যে alt attribute এর value Not found দেওয়া হয়েছে। মানে ছবিটি যদি পাওয়া না যায় তাহলে তার পরিবর্তে এই alternative লেখা Not found দেখা যাবে।
এছাড়া আরো যত attributes রয়েছে তা হলো –
১। accept এট্রিবিউট ব্যবহার করা হয় <input> tag এ যাতে করে আমরা বলে দিতে পারি server কোন ধরনের ফাইল আপলোড করতে পারবে। এই <input> tag কিন্তু <input type=”file”> এর জন্য।
২। accept-charset এট্রিবিউট ব্যবহার করা হয় <form> tag এ যাতে করে আপনি বলে দিতে পারেন form submission এর জন্যে আপনি কোন character encodings ব্যবহার করবেন।
৩। action এট্রিবিউট ব্যবহার করা হয় <form> tag এ যাতে করে আপনি বলে দিতে পারেন form submit করার পর কোথায় যাবে।
৪। async – এট্রিবিউট ব্যবহার করা হয় <script> tag এ যাতে করে আপনি বলে দিতে পারেন যে script এর source গুলো asynchronously ভাবে execut হবে।
৫। autocomplete – এট্রিবিউট ব্যবহার করা হয় <form>, <input> tag এ ব্যবহার করা হয় এই জন্য যে আগের দেওয়া ইনপুট গুলো কি automatically টাইপ করার সাথে সাথে যাবে কি যাবে না।
৬। autofocus – এট্রিবিউট ব্যবহার করা হয় <button>, <input>, <select>, <textarea> tag এ যাতে করে আপনার ওযেবপেইজটি লোড হওয়ার সাথে সাথেই এই tag গুলো ফোকাস অবস্থায় থাকে।
৭। autoplay – এট্রিবিউট ব্যবহার করা হয় <audio>, <video> tag এ যাতে করে audio এবং video গুলো ওয়েবপেইজ লোড হওয়ার সাথে সাথেই play হয়।
৮। bgcolor – এট্রিবিউট ব্যবহার করা হয় <table>, <tr>, <th> tag এ যাতে করে এই tag গুলোর background color পরিবর্তন করা যায়। তবে এই এট্রিবিউটটি কিন্তু deprecated হয়ে গিয়েছে আর এর alternative হিসেবে CSS দিয়ে এই background color করার পরামর্শ দেওয়া হয়।
৯। border – এট্রিবিউট ব্যবহার করা হয় <table> tag এ যাতে করে আমরা table এর চারপাশে border দিতে পারি। তবে এই এট্রিবিউটটি কিন্তু deprecated হয়ে গিয়েছে আর এর alternative হিসেবে CSS দিয়ে এই border দেওয়ার পরামর্শ দেওয়া হয়।
১০। charset – এট্রিবিউট ব্যবহার করা হয় <meta>, <script> tag এ যাতে করে আমরা এর character encoding নির্ধারন করে দিতে পারি।
১১। checked – এট্রিবিউট ব্যবহার করা হয় <input> tag এ যাতে করে tag টি আগে থেকে ক্লিক বা checked অবস্থায় থাকে। এই checked এট্রিবিউট কিন্তু <input> tag এর
টাইপ এট্রিবিউট এর checkbox বা radio এর জন্য ব্যবহার করা হয়।
১২। class – এট্রিবিউট ব্যবহার করা হয় html এর বিভিন্ন tag এর জন্য যাতে করে ঐ tag করে আপনি বিভিন্ন কাজে লাগাতে পারেন। যেমন – CSS এর জন্য styel করা বা JavaScript এর মাধ্যমে ঐ tag কে ধরা / select করা।
১৩। cols – এট্রিবিউট ব্যবহার করা হয় <textarea> tag এ যাতে করে আমরা বলে দিতে পারি যে এই <textarea> input box টি কতগুলো কলাম জুড়ে হবে।
১৪। colspan – এট্রিবিউট ব্যবহার করা হয় <td>, <th> tag এ যাতে করে আমরা বলে দিতে পারি যে একটি table এর কতগুলো column মিলে একটি cell হবে।
১৫। content – এট্রিবিউট ব্যবহার করা হয় <meta> tag এ যাতে করে আমরা বলে দিতে পারি যে http-equiv বা name এট্রিবিউটের content value কি হবে। যেমন-
<meta name="description" content="Free Web tutorials"> <meta http-equiv="refresh" content="30">
১৬। contenteditable – এট্রিবিউট ব্যবহার করা হয় সেই সব tag এ যেই সব tag আপনি instant edit করতে পারবেন। যেমন-
<h1 contenteditable="true">Welcome to Amarcourse.</h1>
এখন ব্রাউজারে যদি এই Welcome to Amarcourse. লিখার উপর ক্লিক করেন তাহলে আপনি এই লিখাটিকে পরিবর্তন করতে পারবেন। কিন্তু পরিবর্তন করে তার ফলাফল দেখার জন্য কিন্তু আরো কিছু কাজ করা লাগবে। আর তার জন্য আপনাকে JavaScript নিয়ে কিছু কাজ করা লাগবে।
১৭। controls – এট্রিবিউট ব্যবহার করা হয় <audio>, <video> tag এ যাতে করে আমরা যখন আমাদের audio বা video play করব তার controls গুলে দেখতে পাবো। যেমন- Sound বাড়ানো বা কমানো, audio বা video play করা বা বন্ধ করা ইত্যাদি।
১৮। coords – এট্রিবিউট ব্যবহার করা হয় <map> tag এর ভিতরে <area> tag এ যাতে করে আপনি image mapping এর area coordinates সেট করতে পারেন। তবে coords এট্রিবিউটের সাথে সাথে আপনাকে shape এট্রিবিউট ও ব্যবহার করতে হবে। যেমন-
<img src ="my-map.png" width="145" height="126" alt="My Map" usemap="#mymap"> <map name="mymap"> <area shape="rect" coords="0,0,82,126" href="south.html" alt="Sun"> <area shape="circle" coords="90,58,3" href="north.html" alt="Mercury"> <area shape="circle" coords="124,58,8" href="west.html" alt="Venus"> </map>
১৯। data – এট্রিবিউট ব্যবহার করা হয় <object> tag যাতে করে আমরা বলে দিতে পারি এই object এর source কোথা থেকে আসবে।
২০। data-* – এট্রিবিউট ব্যবহার করা হয় প্রায় সব গুগলো html tag এ যাতে করে আমরা আমাদের নিজেদের এট্রিবিউট ব্যবহার করতে পারি। যেমন-
<input type="text" name="p_name" value="My Product" data-id="123">
এখানে আমরা দেখতে পাচ্ছি যে, data-id নামে একটি এট্রিবিউট দিয়েছি এবং তার value হলো 123। এখন, আমাদের নতুন এট্রিবিউট এর value যদি পেতে হয় তাহলে JavaScript এর সাহায্য নিতে হবে। তবে এই custom attribute কিন্তু খুবই কাজের।
All HTML Attributes এর পরবর্তি attributes গুলো আমরা এই দ্বিতীয় পর্বে আলোচনা করেছি।