বেসিক এইচটিএমএল (HTML) টিউটোরিয়ালের ৩য় পর্ব শুরু করছি। গত পর্বে এইচটিএমএল গঠন ও ট্যাগ নিয়ে আলোচণা করেছিলাম, আজ এইচটিএমএল এলিমেন্ট (Element )নিয়ে লিখবো।
গত পর্বে জেনেছি এইচটিএমএল এর শুরুর ট্যাগ এরকম আর শেষের ট্যাগ এরকম আর এই দুইটির ভিতর যা থাকে তা সহ পুরো Tag কে এলিমেন্ট বলে। যেমনঃ নিচের কোডটুকু এডিটরে লিখি বা কপি করে পেস্ট করি।
Home page
This is a simple web page
এখানে এর ভিতর সব কিছু নিয়ে এটা একটা html এলিমেন্ট। এভাবে একটা এলিমেন্ট এবং
..
একটি এলিমেন্ট।
আবার একটি এলিমেন্টের ভিতর আরেকটি এলিমেন্ট থাকতে পারে. যেমন ট্যাগ এর ভিতরের
এলিমেন্টটি একটি এলিমেন্ট।
কিন্তু
-এর ভিতরে কোনো এলিমেন্ট নেই যা আছে তা হলো কনটেন্ট। একটা এলিমেন্ট-এর ভিতরের সব এলিমেন্ট কে nested এলিমেন্ট বলে এবং সেই পুরো এলিমেন্টকে parent এলিমেন্ট বলে। সব এলিমেন্ট যা ব্রাউজারে দেখাবে body এলিমেন্টের ভিতরই লিখতে হবে। আর head এলিমেন্ট –এর ভিতরে নির্দিষ্ট কিছু এলিমেন্ট লেখা হয় । আর HTML Tag এর অক্ষর সাধারণত ছোট হাতের অক্ষরে লিখতে হয়।
এখন কোডটি যে কোন এডিটরে সেভ করে যদি কোন ব্রাউজারে দেখি তাহলে নিচের ছবির মতো আসবে।এটি কোডের আউটপুট। আর This is a simple web page এই লেখটিই এইচটিএমএল ইলিমেন্ট।
দুই ধরনের এলিমেন্ট রয়েছে ,ব্লক লেভেল এবং ইনলাইন এলিমেন্ট।
ব্লকলেভেল এলিমেন্ট।
এই ধরনের এলিমেন্টগুলো তার ডানে বামে পুরো সব জায়গা দখল করে থাকে, এধরনের এলিমেন্টগুলো শুরু হয় নতুন লাইনে (যখন ব্রাউজারে প্রদর্শন করবে) একটি ব্লক তৈরী করে। যেমন: div, p, h1, ul, li ইত্যাদি ব্লকলেভেল এলিমেন্ট।
ইনলাইন এলিমেন্ট
:
ইনলাইন এলিমেন্টগুলি দিয়ে নতুন লাইন শুরু হয়না ।
এগুলো লাইনের যে কোন স্থানে দেয়া যায়। উদাহরনঃ a, i, b, span, strong ইত্যাদি ইনলাইন এলিমেন্ট। নিচের কোডটি যেকোনো এডিটরে লিখে বা কপি পেস্ট করি,
Home page
This is a simple web page
This is an example of paragraph.
I am practicing here.
I AM INLINE ELEMENT
‘a’ is a inline element
এর পর ব্রাউজারে ওপেন করলে নিচের ছবির মতো আসবে।
এম্পটি এলিমেন্টঃ
কিছু কিছু HTML এলিমেন্টের কনটেন্ট থাকে না, আর কনটেন্ট নেই এমন ধরনের HTML এলিমেন্টকে এম্পটি এলিমেন্ট বলে।
এই এলিমেন্টগুলো স্টার্ট ট্যাগেই শেষ হয়ে যেতে পারে। যেমন-
হলো একটি এম্পটি এলিমেন্ট এর কোন ক্লোজিং ট্যাগ নেই।
এই এলিমেন্টকে লাইনের মাঝে ব্রেক দেওয়ার জন্য
ব্যবহার করা হয়।
মনে রাখতে হবে HTML ট্যাগগুলো কেস সেনসিটিভ নয়। কিন্তু ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) এর পরামর্শ হল লোয়ারকেস ট্যাগ ব্যবহার করা। আর অধিকাংশ HTML এলিমেন্টের অ্যাট্রিবিঊট থাকতে পারে।
আগামী পর্বে লিখবো ‘এট্রিবিউটস (Attribute)’ এট্রিবিউটস নিয়ে ।
আজকের পর্ব এখানেই শেষ করছি। আগামী পর্ব দেখার আমন্ত্রন জানিয়ে এখানেই শেষ করছি ।