Welcome to Creationbangla-24. কেমন আছেন বন্ধুরা? আশা করি মহান আল্লাহ্ তা'য়ালার অশেষ রহমতে ভালো আছেন। আপনারা অবশ্যই Title দেখে বুঝতে পেরেছেন এই পেজে কী বিষয় নিয়ে আলোচনা করতে যাচ্ছি। তো আপনাদের জানিয়ে রাখি এটি একটি শিক্ষা বিষয়ক সাইট। এই site এ আমি নির্দিষ্ট কিছু বিষয় নিয়ে ধারাবাহিক ভাবে লিখব। আপনাদের একটি কথা না বললেই নয় যে, এই Page টি ভালোভাবে বুঝার জন্য এবং Page টি থেকে উপকৃত হওয়ার জন্য সম্পূর্ণ Page টি মনযোগ সহকারে পড়বেন। এখন এই পেজটিতে আপনাদের সাথে আলোচনা করতে যাচ্ছি "<datalist> ট্যাগ" সম্পর্কে এবং আপনাদের সাথে আছি আমি Md.Aiub তো চলুন বন্ধুরা শুরু করা যাক।
<datalist> ট্যাগ এর গঠনরীতি: <datalist> ট্যাগ এর গঠনরীতি হলো <datalist>...Given your tag or text...</datalist>
আপনি Input Element এর dropdown menu এর Option হিসাবে যা কিছু রাখতে চান সেই সম্পর্কিত সব কিছু <datalist> ও </datalist> এর মাঝে রাখতে হবে। অন্যথায় Input Element এর dropdown menu এর option বলে বিবেচিত হবে না। তাছাড়া <datalist> ট্যাগে Global Attributes ও Event Attributes support করে।
আপনি Input Element এর dropdown menu এর Option হিসাবে যা কিছু রাখতে চান সেই সম্পর্কিত সব কিছু <datalist> ও </datalist> এর মাঝে রাখতে হবে। অন্যথায় Input Element এর dropdown menu এর option বলে বিবেচিত হবে না। তাছাড়া <datalist> ট্যাগে Global Attributes ও Event Attributes support করে।
নিম্নে Input Element এর dropdown menu এর Option তৈরি করার জন্য কোডিং করে দেখানো হলো। আপনি চাইলে কোড বা টেক্স পরিবর্তন করে এখানেই অনুশীলন করতে পারেন এবং Run Code Button এ ক্লিক করে উপরের কোডগুলোর Output দেখতে পারেন । আবার আপনি চাইলে Copy Code Button এ ক্লিক করে কোডগুলো কপি করতে পারেন এবং তা আপনার প্রয়োজনে ব্যাবহার করতে পারেন।
Output
উপরিউক্ত Tag বিশ্লেষণ ও কাজের বর্ণনা :
- <!doctype html> এটাকে আসলে সম্পূর্ণ কোন Tag বলা হয় না। <!doctype html> ট্যাগ ব্যবহার করা হয় <html> ট্যাগ এর পূর্বে। যা ওয়েব ব্রাউজার কে html এর ভার্সন বলে দেয়। যাতে ওয়েব ব্রাউজার ওয়েব কন্টেন্ট গুলোর সাথে ভালো ভাবে কাজ করতে পারে। আর <!doctype html> ট্যাগ এর প্রধান কাজ হচ্ছে ওয়েব ব্রাউজার কে বলে দেওয়া যে, ওয়েব পেজটির Document type. HTML5 Standard.
- <html> ট্যাগ দ্বারা ওয়েব ব্রাউজারকে নির্দেশ করা হয়েছে যে, এই ওয়েব পেজটি HTML ভাষায় তৈরী।
- <head> ট্যাগ ওয়েবপেজ সম্পর্কিত তথ্য ধারণ করে। এখানে ওয়েবপেজের শিরোনাম রাখা হয়েছে <head> ট্যাগ এর মাঝে। তাছাড়াও <head> ট্যাগ এর মাঝেই আপনাকে Style sheet, Script, meta ট্যাগ ব্যবহার করতে হবে।
- <title> ট্যাগ ওয়েবপেজের শিরোনাম ধারণ করে। <title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শুরু করা হয়েছে এবং সম্পূর্ণ শিরোনামটি এই ট্যাগ এর মধ্যেই রাখতে হবে।
- </title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <title> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েবপেজের শিরোনাম বলে গণ্য হবে না।
- </head> ট্যাগ এর মাধ্যমে <head> বন্ধ করা হয়েছে।
- <body> ট্যাগ ওয়েবপজের মূল উপাদান ধারণ করে। আপনি ওয়েবপেজে যা প্রদর্শন করাতে চান সেই সম্পর্কিত সকল ট্যাগ <body> ট্যাগ এর মধ্যে রাখতে হবে।
- <h1> Tag দ্বারা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম নির্ধারণ করা হয়েছে।
- </h1> ট্যাগ এর মাধ্যমে ওয়েবপেজে আলোচিত বিষয়ের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <h1> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম বলে গণ্য হবে না।
- <form> ট্যাগের মাধ্যমে ওয়েবপেজে একটি ফর্ম তৈরি করা হয়েছে। এই ট্যাগের মাঝে action এট্রিবিউট ব্যবহার করা হয়েছে। যার কাজ হলো ফর্মটি কোথায় জমা দিতে হবে তা নির্দিষ্ট করা।
- <label> ট্যাগের মাধ্যমে কোনো Element এর লেবেল নির্দষ্ট করা হয়ে থাকে।
- </label> Tag এর মাধ্যমে <label> ট্যাগ বন্ধ করা হয়েছে।
- <input> ট্যাগের মাধ্যমে ওয়েবপেজে একটি input field তৈরি করা হয়েছে। এটি একটি empty tag. এই ট্যাগের মাঝে list এট্রিবিউট ব্যবহার করা হয়েছে, যা datalist element এর content কে input element এর পর্ব নির্ধারিত option হিসাবে ইল্লেখ করে।
- <datalist> ট্যাগের মাধ্যমে Input Element জন্য একটি পূর্বনির্ধারিত Option এর একটি লিস্ট বা Dropdown Menu তৈরি করা হয়েছে। এই ট্যাগের মাঝে id এট্রিবিউট ব্যবহার করা হয়েছে, যা কোনো Element এর একটি unique ID নির্ধারণ করা হয়েছে।
- <option> Tag এর মাধ্যমে dropdown menu এর জন্য একটি option নির্ধারণ করা হয়েছে। এটি একটি container tag তবে এখানে empty tag আকারে ব্যবহার করা হয়েছে।
- </datalist> Tag এর মাধ্যমে <datalist> ট্যাগ বন্ধ করা হয়েছে।
- </form> Tag এর মাধ্যমে <form> ট্যাগ বন্ধ করা হয়েছে।
- </body> Tag এর মাধ্যমে <body> ট্যাগ বন্ধ করা হয়েছে।
- </html> Tag Tag এর মাধ্যমে <html> ট্যাগ বন্ধ করা হয়েছে। অর্থাৎ Html ভাষায় তৈরিকৃত ওয়েজপেজটি শেষ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে তা Html ভাষায় তৈরিকৃত ওয়েজপেজটির কোনো Document বলে বিবেচিত হবে না।
ًপ্রিয় পাঠক বন্ধুরা,
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "<dd> ট্যাগ" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "<dd> ট্যাগ" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...
Post a Comment