ওয়েব ডিজাইন বাংলা ভিডিও টিউটোরিয়াল (From w3 School) এইস.টি.এম.এল-৫, পর্ব-১2

আসসালামু আলাইকুম ওয়া রহমাতুল্লাহি ওয়া বারাকাতুহু। কেমন আছেন প্রিয় টেকুটউনস বন্ধুরা। আমিও তোমাদের দোয়ায় ভালো আছি। ধারাবাহিক ওয়েব ডিজাইন এন্ড ডেভলপমেন্ট এর আজকে ১২তম পর্বে আপনাদের সবাইকে স্বাগতম। আজ আমি আপনাদের সাথে আলোচনা করবো, html5 list tag, html5 unordered tag, html5 ul tag, html5 ul list style, ul disc style, ul circle style, ul square style, ul none style, html5 Ordered listসহ আরও অনেক বিষয়ে

HTML-5 এ আমরা দুই ধরনের list ব্যাবহার করে থাকি। এর একটি হলো Ordered list, দ্বিতীয়টি হলো Unordered List. এককথায় যদি আমরা Ordered List এবং Unordered List সংঞ্জায়িত করতে চাই তাহলে এভাবে বলা যায়, আমরা যখন আমাদের কোন লিস্টকে 1 2 3 4 ….. এভাবে অথবা কোন একটি order এর মাধ্যমে প্রকাশ করতে চাই তখন আমরা Ordered List ব্যাবহার করবো। আর যখন আমরা কোন সিম্বল যেমন ডিস্ক বা স্টার মার্কস এর মাধ্যমে কোন লিস্টকে প্রকাশ করতে চাই তখন আমরা Unordered List ব্যাবহার করে থাকি। আসুন প্রথমে আমরা একটি Unordered List এর কোড ব্যাবহার দেখে আসি।

<ul>

<li>First list item</li>

<li>Second List Item</li>

<li>Third List Item </li>

<ul>

আসুন আমরা কোডটি বিশ্লেষন করি। <ul> এর মাধ্যমে আমরা ব্রাউজারকে বলছি যে আমরা তোমাকে যে লিস্টটি পাঠাচ্ছি তা একটি unordered list. এবারে আমাদেরকে লিস্ট আইটেম অর্থ্যাৎ <li> ট্যাগ এর ভিতরে আমাদেরকে লিস্ট আইটেম গুলো ডিফাইন করে দিতে হবে। বাই ডিফল্ট আমরা যখন কোন Unordered list ব্যাবহার করে থাকি তখন ডিস্ক আকারে তা প্রকাশিত হয়ে থাকে। যদি আপনি এই ডিফল্ট ডিস্ক টাইপ চেন্জ করতে চান তাহলে আমাদেরকে CSS এর সহায়তা নিতে হবে। নিচের কোডটি খেয়াল করুন।

<ul style=”list-style-type:circle”>

এই কোডটি ব্যাবহার করলে আপনার লিস্টটি Circle আকারে দেখাবে।

এবারে আমরা Ordered list টাইপ দেখবো । নিচের কোডটি দেখুন।

<ol>

<li>First item of the list</li>

<li>Second item of the list </li>

<li>Third item of the list</li>

</ol>

কোড দেখেই ইতিমধ্যে বুঝে গেছেন এটা Ordered list. বাই ডিফল্ট আমাদের এই Ordered লিস্টটি 1 2 3 এভাবে নিউমেরিক আকারে দেখাবে। আমরা চাইলে a b c এভাবে বা A B C সহ যত ধরনের Ordered  লিস্ট সাপোর্ট করে তা ডিফাইন করে দিতে পারি। তার জন্য কোড হলো।

<ol type=”a”>

এভাবে আপনি যেভাবে আপনার লিস্টটিকে দেখাতে চান তা ডিফাইন করে দিতে হবে।

নিচের ভিডিওটি খেয়াল করুন, আমি বিস্তারিত আলোচনা করেছি এই ভিওিটিতে। তারপরও যদি কারো বুঝতে কোন ধরনের সমস্যা হয় আমাকে কমেন্ট করে জানাবেন।

আজ এ পর্যন্তই। সবাই ভালো থাকবেন। Happy Freelancing.