আগের পর্ব গুলো পড়ুনঃ
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ১ঃ প্রাথমিক ধারণা।
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ২ঃ এইচটিএমএল এর গঠন ও এইচটিএমএল ট্যাগ।
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ৩ঃ এইচটিএমএল ট্যাগ ও এইচটিএমএল আট্রিবুটস।
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ৪ঃ এইচটিএমএল COMMENT ও এইচটিএমএল FORMETTING
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ৫ঃ এইচটিএমএল পিকচার ট্যাগ
এইচটিএমএল এ লিস্ট তৈরি করা যায়। এইচটিএমএল লিস্ট আছে ৩ প্রকার।
Unordered লিস্টে কোনও ধারাবাহিক নাম্বার থাকে না। Unordered লিস্টের জন্য <ul>ট্যাগ ব্যবহার করা হয়। নিচের কোড টি ব্রাউজার এ রান করান।
<!DOCTYPE html> <html> <body> <h2>languages</h2> <ul> <li>html</li> <li>css</li> <li>php</li> <li>JavaScript</li> </ul> </body> </html>
ব্রাউজার এ রান করালে দেখবেন লিস্ট আকারে html, css, php ও JavaScript এসেছে। উপরে দেখুন,<ul> ট্যাগের মধ্যে <li> ট্যাগ রয়েছে। প্রথমে <ul> ট্যাগ দেয়া হয়েছে তার ভিতরে <li> ট্যাগ দিয়ে কিছু লিস্ট ওয়ার্ড দেয়া হয়েছে। আপনি ইচ্ছে করলে <ul> ট্যাগের মধ্যে আরও <li> ট্যাগ দিয়ে লিস্টের সংখ্যা বাড়াতে পারেন। ব্রাউজার এ দেখলে একটা জিনিস খেয়াল করবেন যে, লিস্ট গোল সিম্বল এসেছে। এই লিস্ট স্টাইল এর বিভিন্ন টাইপ আছে। লিস্ট স্টাইল ব্যবহার করতে চাইলে আপনাকে গ্লোবাল আট্রিবুট "style" ব্যবহার করতে হবে।
নিচের কোড টি দেখুনঃ
<!DOCTYPE html> <html> <body> <h2>Unordered List with Square Bullets</h2> <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
উপরের কোডে "style" আট্রিবুট ব্যবহার করে লিস্ট স্টাইল টাইপ স্কোয়ার দেয়া হয়েছে। এই কোডটি ব্রাউজার এ রান করিয়ে দেখুনঃ
দেখবেন এইরকম এসেছে। আবার আপনি যদি চান লিস্ট তৈরি করবেন কিন্তু কোনও স্কোয়ার বা সার্কেল আকৃতির কোনও সিম্বল থাকবে না, তাহলে তাও করতে পারবেন। শুধু লিস্ট স্টাইল টাইপ এ "none" দিন তাহলে লিস্ট আসবে কিন্তু কোনও সিম্বল আসবে না। নিচের কোডটি ব্রাউজার এ রান করানঃ
<!DOCTYPE html> <html> <body> <h2>Unordered List without Bullets</h2> <ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
দেখবেন লিস্ট এসেছে কিন্তু কোনও সিম্বল আসে নি।
Ordered লিস্টে ধারাবাহিক নাম্বার থাকে।Ordered লিস্টের জন্য <ol>ট্যাগ ব্যবহার করা হয়। নিচের কোড টি ব্রাউজার এ রান করান:
<!DOCTYPE html> <html> <body> <h2>languages</h2> <ol> <li>html</li> <li>css</li> <li>php</li> <li>JavaScript</li> </ol> </body> </html>
দেখুন লিস্ট গুলো কোনও সিম্বল দিয়ে না এসে ১, ২, ৩ এভাবে এসেছে। আপনি চাইলে ১, ২, ৩ এর পরিবর্তে A, B, C আকারেও নিয়ে আসতে পারবেন। শুধু টাইপ পরিবর্তন করতে হবে। নিচের কোডটি ব্রাউজার এ রান করানঃ
<!DOCTYPE html> <html> <body> <h2>Languages</h2> <ol type="A"> <li>html</li> <li>css</li> <li>JavaScript</li> </ol> </body> </html>
লিস্ট গুলো A, B, C আকারে এসেছে। আপনি চাইলে রোমান অক্ষরে ও লিস্ট গুলো কে প্রকাশ করতে পারেন শুধু টাইপ এ "I" দিন। মানে এরকমঃ
<ol type="I"></ol>
নিচের কোড টি দেখুনঃ
<!DOCTYPE html> <html> <body> <h2>A Description List</h2> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>
এখানে,
এবার উপরের কোডটি রান করান। দেখুন, খুব সুন্দর বইয়ের মত উপরে নাম নিচে তার Description দেয়া আছে।
আপনি চাইলে লিস্টের ভিতরে আরও লিস্ট রাখতে পারবেন। একে Nested লিস্ট বলে। এর গঠন টি হবেঃ
<ul> <li>Normal <ul> <li>Nested</li> <li>Nested list</li> </ul> </li> <li>Normal</li> <ul>
আপনি পুরো কোডটি <body></body> ট্যাগের মধ্যে দিয়ে ব্রাউজার এ রান করান। মানে পুরো কোডটি হবে এরকমঃ
<!DOCTYPE HTML> <html> <head> <title>This is titlebar</title> </head> <body> <ul> <li>Normal <ul> <li>Nested</li> <li>Nested list</li> </ul> </li> <li>Normal</li> <ul> </body> </html>
ব্রাউজার এ রান করালে দেখবেন লিস্ট কন্টেন্ট এর ভিতরে আরও একটি লিস্ট।
আশা করি বুঝতে পেরেছেন।আজকে এ পর্যন্তই। আগামী পর্বে নতুন কিছু নিয়ে আলোচনা করব। অবশ্যই আগের পর্ব গুলো পড়বেন। যারা ওয়েব ডিজাইন শিখতে চান তারা গুগল সার্চ করে এই বিষয় গুলো সম্পর্কে আরও জানুন ও বেশি বেশি প্র্যাকটিস করুন।
পূর্বে প্রকাশিত এখানে। 🙂 🙂
আমি রিপন শাহ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 18 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
অনেক কিছু জানার ছিল জানা হোল ধন্যবাদ ভাই…।