গত পর্বে আমরা এইচটিএমএল এর ট্যাগ নিয়ে আলোচনা করেছিলাম , এই পর্বে আমরা এইচটিএমএল এর এলিমেন্ট নিয়ে আলোচনা করবো ।
নিচের উদাহরনটি দেখুন
1.<!DOCTYPE html>2.<html>3.<head> </head>4.<body>5.<h1>Webcoachbd demo heading</h1>6.<p>demo content goes here.</p>7.</body>8.</html>একইভাবে বাকিগুলিও এক একটি এলিমেন্ট।
এলিমেন্টের ভিতর এলিমেন্ট থাকতে পারে আবার যেমন <h1></h1> এর ভিতর কোন এলিমেন্ট নেই, যে লেখাটি আছে সেটি হচ্ছে এর কনটেন্ট।
তাই <h1></h1> এর ভিতরের লেখাটিসহ এটা h1 এলিমেন্ট।
এই উহরনটিতে মোট ৫টি এলিমেন্ট আছে html এলিমেন্ট, head এলিমেন্ট, body, h1 এবং p এলিমেন্ট।
* ট্যাগের মত এখানে html এলিমেন্টের চাইল্ড এলিমেন্ট হচ্ছে বাকি সবগুলি এলিমেন্ট। আবার body হচ্ছে প্যারেন্ট এবং এর চাইল্ড হচ্ছে h1 ও p এলিমেন্ট। যে এলিমেন্টের ভিতর অন্য এলিমেন্ট থাকে সেটা হচ্ছে প্যারেন্ট এবং ভিতরের গুলি চাইল্ড এলিমেন্ট।
* ট্যাগগুলির শব্দগুলি ছোটহাতের অক্ষরে লিখতে হবে, যেমন <body> এভাবে না দিয়ে <BODY> এভাবে দিলে এটা একটা গ্রামাটিকাল ভুল। সাথে সাথে end tag টিও দিতে হবে নাহলে একই ভুল হবে।
** যত এলিমেন্ট লেখি না কেন সব body এলিমেন্টের ভিতরই লিখতে হবে, বাকি এলিমেন্ট যেমন head ইত্যাদির ভিতর শুধু নির্দিষ্ট কিছু এলিমেন্ট লেখা যায়। ব্রাউজারে শুধু ঐটুকুরই আউটপুট আসে যেটা body এলিমেন্টের ভিতর থাকে।
এইচটিএমএল এ সাধারনত ২ ধরনের এলিমেন্ট আছে সেগুলা হোল ব্লক লেভেল এলিমেন্ট এবং ইনলাইন এলিমেন্ট নিচে এর বিস্তারিত ধারনা দেয়া হোল ।
ব্লক লেভেল এবং ইনলাইন এলিমেন্ট
ব্লকলেভেল এলিমেন্ট : যে এলিমেন্টগুলি বাই ডিফল্ট তার ডানে বামে পুরো জায়গা দখল করে থাকে সেগুলিকে ব্লক লেভেল এলিমেন্ট বলে। অন্যভাবে বলা যায় যে, যে এলিমেন্টগুলি শুরু হয় নতুন লাইনে (যখন ব্রাউজারে প্রদর্শন করবে) সেগুলি ব্লক লেভেল এলিমেন্ট। div, p, h1, ul, li ইত্যাদি ব্লকলেভেল এলিমেন্ট।
ইনলাইন এলিমেন্ট : যে এলিমেন্টগুলির কারনে নতুন লাইন শুরু হয়না সেগুলি ইনলাইন এলিমেন্ট। a, i, b, span, strong ইত্যাদি ইনলাইন এলিমেন্ট।
01.<!DOCTYPE html>02.<html>03.<head>04. 05.</head>06.<body>07. 08.<h1>This is block level element</h1>09. 10.<p>This is block level element too</p>11. 12.<strong>This is inline element</strong>13.<a href="http://bdwebdeveloper.blogspot.com/">"a" is a inline element </a>14. 15.</body>16.</html>
i am for the first time here. I found this board and I in finding It truly helpful & it helped me out a lot. I hope to present something back and help others such as you helped me. Angular trainer
ReplyDelete