বুধবার, ১০ আগস্ট, ২০১১

HTML List Tutorial in Bangla

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


তিন প্রকারের এইচটিএমএল লিস্ট বিদ্যমান। <ol> tag দিয়ে শুরু করে ধারাবাহিক লিস্ট(ordered list), <ul> ট্যাগ দিয়ে শুরু করে ধারাবাহিকতা হীন লিস্ট(unordered list), <dl> ট্যাগ দিয়ে শুরু করে সংজ্ঞামূলক লিস্ট(definition list)।

<ul> - unordered list; বুলেট

<ol> - ordered list; নম্বর
<dl> - definition list; অভিধান 


এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists)  

<ol> ট্যাগ দিয়ে ক্রমিক লিস্ট(ordered list) শুরু করা হয়। <li> ট্যাগ দ্বারা দ্রব্যের তালিকা (list item) বোঝায়।তালিকা তৈরীর জন্য <li> ট্যাগ কে আপনার opening (<ol>) এবং closing (</ol>) tag এর মধ্যে রাখতে হয়। ক্রমিক (ordered) অর্থ হচ্ছে নম্বর যেমন ১, ২, ৩ ইত্যাদি।

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>


প্রদর্শন:

Goals

  1. Find a Job
  2. Get Money
  3. Move Out


Start attributes দিয়ে নিজের ইচ্ছানুযায়ী নম্বর হতে লিস্ট শুরু করা যায়।

 <h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>


প্রদর্শন:

Goals

  1. Buy Food
  2. Enroll in College
  3. Get a Degree


এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists continued)

আরও চার প্রকারের ধারাবাহিক লিস্ট(ordered list) রয়েছে। এগুলো সাধারন ১,২,৩ নম্বরের পরিবর্তে রোমান নম্বর বা বর্ণ হতে পারে তা বড় হাতের বা ছোট হাতের। type attribute ব্যবহার করে নম্বর পরিবর্তন করা হয়।


<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">


Ordered List Types:
Lower-Case Letters    Upper-Case Letters    Lower-Case Numerals    Upper-Case Numerals 
 a.Find a Job     A.Find a Job     i.Find a Job          I.Find a Job
 b.Get Money   B.Get Money    ii.Get Money       III.Get Money



এইচটিএমএল বিনাক্রম লিস্ট (HTML unordered lists)

<ul> ট্যাগ সাহায্যে বুলেট লিস্ট তৈরী করা হয়। বুলেট লিস্ট আবার তিন প্রকার যেমন ১. squares ২.discs ৩.circles । default হিসাবে সাধারনত full discs ব্যাবহার করা হয়। 


<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>



প্রদর্শন:

Shopping List

  • Milk
  • Toilet Paper
  • Cereal
  • Bread

আমরা type attributes ব্যবহার করে unordered list এর অন্যান্য বুলেট ব্যবহার করতে পারি।

<ul type="square">

<ul> type="dics">

<ul> type="circle">type="square" type="disc" type="circle"



ইচটিএমএল ডেফিনেশন লিস্ট (HTML definition lists)

Definition list এর ব্যবহার সাধারনত অভিধানে দেখতে পাই। <dl> tag ব্যাবহার করে Definition list তৈরী করা হয়। যাকে Define অর্থ্যাৎ সংজ্ঞায়িত করতে চাই তাকে bold আকারে দেখানো উচিত। Definition list tag এর মধ্যে আরও দুটি tag অর্ন্তভুক্ত সেগুলো হলো ১. <dt> ২. <dd> ।

<dl> tag: লিস্ট এর শুরু জন্য এই ট্যাগ ব্যবহার করা হয় ।

<dt> tag: যাকে সংজ্ঞায়িত(Define) করবো এই ট্যাগ ব্যবহার করে তার নাম লেখা হয়।

<dd> tag: <dt> tag এ যে নাম লেখা হয়েছে তার সম্পর্কে এখানে আলোচনা হয় ।


<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>


প্রদর্শন:
Fromage
French word for cheese.
Voiture
French word for car.

0 comments:

একটি মন্তব্য পোস্ট করুন