আবার ফিরে এলাম,
ব্যাসিক তো মোটামোটি বুঝেই গেছি , এবার আসুন একটূ সামনে এগুনো যাক। প্রথমেই বলব ইন্টারনেট থেকে notepad++ ডাউনলোড করে নিন , যেন কাজ করতে একটু সুবিধা পাওয়া যায়।
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
এইচটিএমএল এলিমেন্ট (Element)
এইচটিএমএল ট্যাগ (Tag)
এইচটিএমএল অ্যাট্রিবিউট (Attribute)
Tag নিয়ে আগের পর্বগুলোতে কথা বললেও বাকি দুটো নিয়ে আসলে কোন কিছুই বলা হয়নি। তাই ব্যার্থতার দায় মাথায় নিয়ে , সামান্য পাপ মোচনের লক্ষে একটু কথা বলেই নেই ।
এসব এখন নয় , বুঝে জাবেন আস্তে আস্তে,:D
গত পর্বে <p> ট্যাগ নিয়ে বলেছিলাম শুধুমাত্র প্যারাগ্রাফ বা অনুচ্ছেদ ধরনের লেখা দেখতে চাইলেই এই ট্যাগ, এবার বলব হেডিং ট্যাগ নিয়ে । পত্রিকার হেড লাইন তো দেখেছেনই একটু মোটা ও বড় টাইপের হয় ।
এখন দেখব কিভাবে তা দিতে পারি ,
এর জন্য আমাদের h ট্যাগ ইউজ করতে হবে , শিরোনাম বা হেডিং আকারে বড় ফন্টের লেখা ব্রাউজারে প্রদর্শনের জন্য এইচটিএমএল এ রয়েছে ৬ ধরনের হেডিং ট্যাগ। এর মধ্যে সবচেয়ে বড় হচ্ছে <h1></h1> এভাবে <h2></h2>, <h3></h3>... h6 পর্যন্ত
এই হেডিং ট্যাগের ভিতরে আমরা যা লেখব তাই হেড লাইন আকারে আসবে , ছবি দেখে নীচের কোডটি নোটপ্যাডে লেখে , html ফাইল বানিয়ে রান করুন দেখবেন কোন হেডিং কতটুকু বড় হেড লাইন তৈরী করে দিচ্ছে ।
হেডিং তো আমি বললাম এখন আপনারা একটূ প্র্যাক্টিস এর জন্য নিজের প্রিয় বই নিয়ে একটি ছোট্ট প্যারাগ্রাফ লিখে ফেলুন । ইন্টারনেটে পাওয়া প্যারাগ্রাফ গুলোর মত হেডিং দিলে লেখতে পেরেছেন কিনা ।
এবার আসুন লিস্টিং অপশনে , আমরা এবার লিস্ট আকারে ওয়েব পেইজ এ কিছু দেই। এইচটিএমএল এ ৩ ধরনের লিস্ট করার ট্যাগ আছে, প্রয়োজনমত যেকোন একটি ব্যবহার করতে পারেন।
Unordered List :
এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভিতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে। যেমনআমরা যদি <body> ট্যাগের ভিতরে নীচের কোড দেই তাহলে দেখতে ছবিটির মত দেখাবে ,
<ul>
<li>Bangla</li>
<li>English</li>
<li>Social Science</li>
<li>Mathemetaics</li>
</ul>
এখানে বুলেট পয়েন্ট হিসেবে গোল চিহ্ন এসেছে , আপনি ইচ্ছে করলে সিএসএস দিয়ে গোল চিহ্নের পরিবর্তে অন্য চিহ্নও দিতে পারেন এগুলি সিএসএস এ আলোচনা হবে।
Ordered List:
কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন যেমনঃ
<ol>
<li>iPad</li>
<li>iPhone</li>
<li>MacBook Air</li>
</ol>
এর ফলে লিস্ট গুলো 1,2,3 সিরিয়ালে এসে যাবে
আরেকটি লিস্টিং ট্যাগ আছে যার ব্যাবহার আজকাল হয়না বললেই চলে তবুও জানার জন্য , Definition list নামে আরেকটা লিস্টিং ট্যাগ , এটা দিয়ে একটু ভিন্নভাবে তালিকা দেখানো যায় যেমন
<dl>
<dt>My Village </dt>
<dd> The name of........ </dd>
</dl>
নোটপ্যাডে বডি ট্যাগের মধ্যে দিয়ে দেখুন কেমন কাজ করে । বুঝে যাবেন
আশা করি ভাল লেগেছে , সামনে আরো কিছু বিষয় নিয়ে হাজির হব ইনশাআল্লাহ ততদিন পর্যন্ত প্র্যাক্টিস করতে থাকুন ।
আর যারা গতপর্ব মিস করেছেন তারা ঘুরে আসুন ২য় পর্ব থেকে
