Header Ads

ad728
  • Breaking News

    HTML LIST- Bangla Tutorial - Web design in 7 days


    এইচ টি এমএল লিস্ট

    লিস্ট বা তালিকাঃ এইচটিএমএল পেজে আমরা বিভিন্ন ধরনের লিস্ট ব্যবহার করে থাকি।



    যেমনঃ-

    1.   আনঅর্ডারড লিস্ট
    2.   অর্ডারড লিস্ট
    3.   লিস্ট তালিকা

    আনঅর্ডারড লিস্ট

    বিভিন্ন বুলেট স্টাইলের মাধ্যমে আপনি আনঅর্ডারড লিস্ট তৈরি করতে পারবেন। আনঅর্ডারড লিস্ট তৈরির জন্য 3 টি ট্যাগ ব্যবহার করতে হবে।

    <UL> ট্যাগ লিস্ট খোলার জন্য
    <L1> ট্যাগ লিস্ট এলিমেন্ট সিগনিফাইয়ের জন্য আর
    </UL> ট্যাগ লিস্টের শেষে ব্যবহৃত হয়।

    উদাহরন সরুপ নিম্নের কোডটি রান করালে একটি ট্যাগ লিস্ট তৈরি হবে।

    <HTML>
    <HEAD>
    <TITLE> Unordered List </TITLE>
    </HEAD>
    <BODY>
    <B>Food</B>

    <UL>
    <L1> Vegetables

    <UL>
    <LI> Broccoli
    <LI> Carrot
    <LI> Pea
    </UL>

    <UL>
    <LI> Meat

    <UL>
    <LI> Chicken
    <LI> Beef
    <LI> Pork
    </UL>

    </UL>
    </BODY>
    </HTML>

    এটি রান করালে নিচের মতো আউটপুট পাবেন-



    বুলেট মডিফাই করা

    Type এট্রিবিউট  <UL> ট্যাগ ব্যবহার করে আপনি বিভিন্ন ধরনের বুলেট ব্যবহার করতে পারেন। Type  এট্রিবিউট CIRCLE, DISC বা SQUARE প্রভৃতি সাপোর্ট করে।

    টাইপ এট্রিবিউট ব্যবহার করে নিম্নের কোডটি দেখুন-

    <HTML>
    <HEAD>
    <TITLE> Unordered List </TITLE>
    </HEAD>
    <BODY>
    <B>Food</B>
    <UL TYPE= "SQURE">
    <LI> Vegetables
    <UL TYPE = "DISC">
    <LI> Broccoli
    <LI> Carrot
    <LI> Pea
    </UL>
    <LI> Meat
    <UL>
    <LI> Chicken
    <LI> Beef
    <LI> Pork
    </UL>
    </UL>
    </BODY>
    </HTML>

    এটি রান করালে নিচের মতো আউটপুট পাবেন-



    অর্ডার্ড লিস্ট

    অর্ডার্ড লিস্টে বিভিন্ন স্টাইলের বুলেট ব্যবহার করতে পারেন। অর্ডার্ড লিস্টে ও 3 টি বেসিক ট্যাগ ব্যবহার করে এখানে আপনি বুলেট এর ধরন পরিবর্তন করতে পারবেন TYPE ও START এট্রিবিউট ব্যবহার করে। TYPE এট্রিবিউট A, a, I, i, বা 1 ভ্যালু সাপোর্ট করে। ‍ START এট্রিবিউট নির্দিষ্ট করে কোন পয়েন্ট থেকে কাউন্ট শুরু করে।


    নিচে অডার্ড লিস্টে TYPE ও START এট্রিবিউট ব্যবহার করার একটি উদাহরন দেখুন-

    <HTML>
    <HEAD>
    <TITLE> Ordered List </TITLE>
    </HEAD>
    <BODY>
    <B>Food</B>
    <OL TYPE= "A">
    <LI> Vegetables
    <OL TYPE = "a">
    <LI> Broccoli
    <LI> Carrot
    <LI> Pea
    </OL>
    <LI> Meat
    <OL TYPE = "a" START = "2">
    <LI> Chicken
    <LI> Beef
    <LI> Pork
    </OL>
    </OL>
    </BODY>
    </HTML>

    এটি রান করালে নিচের মতো আউটপুট পাবেন-



    ডেফিনেশন লিস্ট-

    বিভিন্ন বিষয়ের সংজ্ঞার লিস্ট তৈরির জন্য ডেফিনেশন লিস্ট ব্যবহৃত হয়।
    ডেফিনেশন লিস্ট তৈরির জন্য 4 টি ট্যাগ ব্যবহৃত হয়।

    <DL>, <DT>, <DD>, ও </DL> ট্যাগ ব্যবহার করে ডেফিনেশন লিস্ট এর উদাহরন দেখুন-

    <HTML>
    <HEAD>
    <TITLE> Definition List </TITLE>
    </HEAD>
    <BODY>
    <B>Tea tune</B>
    <DL>
    <DT> Teatune
    <DD> বাংলাদেশ দিন দিন উন্নতির দিকে অগ্রসর হচ্ছে। অনেকেই ইন্টারনেটকে পেশা হিসাবে বেছে নিচ্ছে, আর এই সকল ইন্টারনেট প্রেমীদের সহযোগিতার জন্য টি টিউন নিয়মিত কাজ করে যাচ্ছে।
    <DT> Teatune Service
    <DD> টি টিউন এর মাধ্যমে আপনার অনলাইন ক্যারিয়ার শুরু করতে পারবেন। এখানে HTML, PHP সহ অন্যান্য সকল ওয়েব ল্যাঙ্গুয়েজ এর উপর ফ্রি প্রশিক্ষন দেওয়া হয়। এছাড়া নিজের ডিভাইসকে সর্বদা আপডেট রাখতে বিভিন্ন প্রয়োজনীয় সফটওয়ার গুলি ডাইনলোড করতে পারবেন। আরো জানতে পারবেন অনলাইনের বিভিন্ন ইনকাম মেথড সম্পর্কে । তাই আজই নিজে আসুন , এবং বন্ধুদের কাছে সাইটটি শেয়ার করতে ভুলবেন না।
    </DL>
    </BODY>
    </HTML>

    এটি রান করালে নিচের মতো আউটপুট পাবেন-



    বিশেষ চিহ্নঃ

    আপনি যদি খেয়াল করেন দেখবেন ওয়েবপেজে অনেক বিশেষ চিহ্ন বা স্পেশাল ক্যারেক্টার ব্যবহৃত হয়। আমরা কোন চিহ্ন চাই তা ওয়েব ব্রাউজার কিভাবে বুঝবে? যেমন ধরুন আমি < চিহ্ন প্রদর্শনের জন্য &#60 ব্যবহার করি ,আর > চিহ্ন প্রদর্শনের জন্য  &#62 ব্যবহার করি। HTML এ অনেক স্পেশাল ক্যারেক্টার রয়েছে দেখতে ক্লিক করুন

    এইচ টি এম এল এডিটরঃ

    এইচ টি এম এল কোড যে কোন কিছুতে লিখে রান করার জন্য একটি ভালো এডিটর লাগবে। ইন্টারনেটে হাজারো এডিটর রয়েছে।

    আমি নোটপ্যাড এডিটর ব্যবহার করি নোট প্যাড সম্পর্কে বিস্তারিত জানতে ও ডাউনলোড করতে এখানে ক্লিক করুন

    এই টিউন সম্পর্কে আপনার কোন প্রশ্ন থাকলে কমেন্ট করুন। ওযেব ডিজাইন শিখতে এই ক্যাটাগরির প্রথম টিউন থেকে চর্চা শুরু করুন ধন্যবাদ।

    No comments

    Post Top Ad

    ad728

    Post Bottom Ad

    ad728