এইচটিএমএল লিস্ট টিউটোরিয়াল (HTML List Tutorial in Bangla)



ওয়েব পেজে যদি তালিকা বা লিস্ট প্রদর্শন করাতে চান তখন এইচটিএমএল এ ৩ ধরনের লিস্ট করার ট্যাগ আছে, প্রয়োজনমত যেকোন একটি ব্যবহার করতে পারেন।
Unordered List :
এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে। যেমন
1.<ul>
2.<li>Bangla</li>
3.<li>English</li>
4.<li>Social Science</li>
5.<li>Mathemetaics</li>
6.</ul>
প্রদর্শন:
  • Bangla
  • English
  • Social Science
  • Mathematics
আপনি ইচ্ছে করলে সিএসএস দিয়ে গোল চিহ্নের পরিবর্তে অন্য চিহ্নও দিতে পারেন এগুলি সিএসএস এ আলোচনা হবে।

Ordered List:
কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন যেমন
1.<ol>
2.<li>iPad</li>
3.<li>iPhone</li>
4.<li>MacBook Air</li>
5.</ol>
প্রদর্শন
  1. iPad
  2. iPhone
  3. MacBook Air
ol এলিমেন্টে start নামে একটা এট্রিবিউট ব্যবহার করে কত থেকে শুরু হবে এটা ঠিক করা যায় যেমন উপরের লিস্ট টি যদি ১০ থেকে দেখাতে চান তাহলে
1.<ol start="10">
2.<li>iPad</li>
3.<li>iPhone</li>
4.<li>MacBook Air</li>
5.</ol>
প্রদর্শন
  1. iPad
  2. iPhone
  3. MacBook Air
li তে value নামের একটা এট্রিবিউট ব্যবহার করে যেকোন আইটেমের নাম্বার পরিবর্তন করা যায় যেমন
1.<ol>
2.<li value="5">iPad</li>
3.<li value="10">iPhone</li>
4.<li value="15">MacBook Air</li>
5.</ol>

প্রদর্শন
  1. iPad
  2. iPhone
  3. MacBook Air
Definition list নামে আরেকটা লিস্টিং ট্যাগ আছে এটা খুব ব্যবহার হয়না, এটা দিয়ে একটু ভিন্নভাবে তালিকা দেখানো যায় যেমন
01.<dl>
02.<dt>Preliminary analysis</dt>
03.<dd> in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them</dd>
04.<dt>Systems analysis, requirements definition</dt>
05.<dd>Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs</dd>
06.<dt>Systems design</dt>
07.<dd>Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.</dd>
08.<dt>Development</dt>
09.<dd>The real code here</dd>
10.</dl>
প্রদর্শন
Preliminary analysis
in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them
Systems analysis, requirements definition
Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs
Systems design
Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.
Development
The real code here

0 মন্তব্য(গুলি):