HTML শিখুন HTML5 সহ [পর্ব-7] – লিস্ট

HTML List

প্রধানত দুই ভাবে লিস্ট তৈরি করা যায়। একটা হচ্ছে ordered lists,  এবং আরেকটা হচ্ছে unordered lists। নিচের ছবিতে একটি Orrderd List ও একটি unordered lists এর উদাহরন দেখানো হলঃ

Orderd List তৈরি করার নিয়মঃ

Orderd List এর জন্য <ol> Tag ব্যবহার করতে হয়। তার পর এর ভিতরে কয় টা লিস্ট করবেন বা কয়টা উপাদান থাকবে তা <li> Tag এর বিতরে লিখতে হয়। নিচের উদাহরন টি দেখলে আরো শুবিধা হবে।

unorderd List তৈরি করার নিয়মঃ

একই ভাবে unorderd List এর জন্য <ul> Tag ব্যবহার করতে হয়। তার পর এর ভিতরে কয় টা লিস্ট করবেন বা কয়টা উপাদান থাকবে তা <li> Tag এর বিতরে লিখতে হয়। নিচের উদাহরনটি দেখুনঃ

এ ছাড়া  আরো অনেক ভাবে লিস্ট তৈরি করা যায়। নিচের উদাহরটি দেখুন তাহলে বুঝতে পারবেন। ছবিটি যদি দেখতে অসুবিদা হয় তাহলে নতুন ট্যাবে বড় করে দেখুন।

HTML Definition Lists

লিস্ট এর উপাদান গুলো সম্পর্কে কিছু লেখা বা তথ্য দেওয়ার জন্য HTML Definition Lists ব্যবহার করা হয়।

আমরা একটা লিস্ট তৈরি করছি। লিস্টের উপাদান সম্পর্কে কিছু ব্যাখ্যা দেওয়া ধরকার তার জন্য আছে <dl> ও <dd> Tag।  <dl> দ্বারা Definition Lists তৈরি করা হয় এবং   <dd>  ট্যাগের সাহায্যে লিস্টের প্রত্যেকটি উপাদানের পর কিছু তথ্য যোগ করা হয়ঃ

HTML Nested Lists

একই লিস্টের ভিতর আরেকটি লিস্ট তৈরি করার জন্য HTML Nested Lists ব্যবহার করা হয়।  নিচের উদাহরন টি দেখুনঃ

আপনার ইচ্ছে মতো একটির ভিতরে আরো কয়েকটি লিস্ট তৈরি করতে পারেবন।

drop-down list:

ড্রপ ডাউন লিস্ট তৈরি করা জন্য নিচের উদাহরনটি লক্ষ্য করুনঃ

তাছাড়া আপনি ড্রপ ডাউনের অপশন গুলোকে বিভাগ অনুযায়ী সাজাতে পারেন। তার জন্য নিছের উদাহরনটি দেখুনঃ

এখানে টেকনলজি ব্লগ গুলো একটার নিছে আরেকটা টেকনলজি ব্লগ  বিভাগের মধ্যে থাকবে। আবার নন টেকনলজি ব্লগ গুলো টেকনলজি ব্লগ বিভাগের মধ্যে থাকবে।

 

HTML Forms

কোন সাইটে ব্যাক্তিগত তথ্য বা অন্য কোন তথ্য প্রবেশ করার জন্য HTML Formsব্যবহৃত হয়। একটি HTML form এ input উপাদান হিসেবে name filds, passwords, text fields, check boxe, radio-buttons, submit buttons ইত্যাদি থাকতে পারে।

আমরা কোন সাইটে প্রবেশ করার জন্য নাম ও পাসওয়ার্ড দিয়ে ঢুকতে হয় যা HTML Forms দিয়ে তৈরি করা।

উপরের উদাহরনে <form> Tag দিয়ে আগে Form তৈরি করা হয়েছে। তার পর এ ট্যাগের ভিতরে ফরমের উপাদান গুলো তৈরি করা হয়েছে। ফরমের আগে কি লেখা থাকবে প্রথমে তা দিতে হয়, তারপর <input type=”text” name=”firstname” /> দিয়ে  Name ইনপুট নেওয়ার জন্য একটা বক্স তৈরি হবে। একই ভাবে <input type=”password” name=”pwd” /> দিয়ে পাসওয়ার্ড নেওয়ার জন্য একটি বক্স তৈরি হবে। password ফিল্ডের লেখা গুলো দেখা যায় না।  যখন password এর ঘরে কোন কিছু ইনপুট দেওয়া হয় তখন asterisks বা ছোট কালো বৃত্ত উঠে। কিন্তু নেইম ফিল্ডের লেখা গুলো দেখা যায়। স্বাভাবিক ভাবে একটি বক্স গুলো ২০ টি Chrecter এর সমান হয়। তাছাটা আপনি ইচ্ছে করলে বক্স গুলোর সাইজ ঠিক করে দিতে পারেন। পরের উদাহরনে দেখতে পারবেন কিভাবে বক্সের সাইজ নির্ধারন করে দেওয়া যায়।

একই গ্রুপের ইনপুট গুলোকে একটি বক্সে রাখাঃ

আপনি চাচ্ছেন একই গ্রুপের ইনপুট গুলোকে একটি বক্সে রাখতে। তার জন্য <legend> ট্যাগ ব্যবহার করতে হবে।  নিচের উদাহরন দেখলে আরো পরিস্কার হবেঃ

এখানে ব্যক্তিগত তথ্য সবগুলো আলাদা করে একটি  বক্সের ভিতরে রয়েছে।

Radio Buttons

অনেক সময় কোন কিছু সিলেক্ট করার জন্য Radio Buttos তৈরি করতে হয়। তার জন্য input type=” radio” দিলেই হবে।উদাহরনঃ

Check boxes

চেক বক্স তৈরি করার জন্য <input type=”checkbox” /> দিলে চেকবক্স তৈরি হবে। বাকিটা আগের গুলোর মত। উদাহরনঃ

TexT Area:

ব্যবহারকারীরা লেখার জন্য একটি অংশ সৃষ্টি করার জন্য TexT Area ব্যবহৃত হয়। নিচের উদাহরন টি করলে বুঝতে পারবেনঃ

ধন্যবাদ সবাইকে । আবার ও দেখা হবে HTML নিয়ে।