বেসিক এইচটিএমএল(HTML)শিখুন টিউটোরিয়াল [পর্ব-৩] : এইচটিএমএল এলিমেন্ট [Element]

      image     বেসিক এইচটিএমএল (HTML) টিউটোরিয়ালের ৩য় পর্ব শুরু করছি গত পর্বে এইচটিএমএল গঠন ও ট্যাগ নিয়ে আলোচণা করেছিলাম, আজ এইচটিএমএল এলিমেন্ট (Element )নিয়ে  লিখবো।     

          গত পর্বে জেনেছি এইচটিএমএল  এর  শুরুর ট্যাগ  এরকম <> আর শেষের ট্যাগ </ >এরকম আর এই দুইটির ভিতর যা থাকে তা সহ পুরো Tag কে এলিমেন্ট বলেযেমনঃ নিচের কোডটুকু এডিটরে লিখি বা কপি করে পেস্ট করি।

 

<html>

    <title>

           Home page

   </title>

<body>

<h1> This is a simple web page</h1>

        </body>

</html>

       এখানে <html> </html> এর ভিতর সব কিছু নিয়ে এটা একটা html এলিমেন্ট এভাবে <body> </body> একটা এলিমেন্ট এবং <h1>..</h1> একটি এলিমেন্ট

   আবার একটি এলিমেন্টের ভিতর আরেকটি এলিমেন্ট থাকতে পারে. যেমন <body> ট্যাগ এর ভিতরের <h1></h1> এলিমেন্টটি একটি এলিমেন্ট

   কিন্তু <h1></h1> -এর ভিতরে কোনো এলিমেন্ট নেই যা আছে তা হলো কনটেন্টএকটা এলিমেন্ট-এর ভিতরের সব এলিমেন্ট কে nested এলিমেন্ট বলে এবং সেই পুরো এলিমেন্টকে parent এলিমেন্ট বলেসব এলিমেন্ট যা ব্রাউজারে দেখাবে body এলিমেন্টের ভিতরই লিখতে হবে আর head এলিমেন্ট –এর ভিতরে নির্দিষ্ট কিছু এলিমেন্ট লেখা হয় আর HTML Tag এর অক্ষর সাধারণত ছোট হাতের অক্ষরে লিখতে হয়।

     এখন কোডটি যে কোন এডিটরে সেভ করে যদি কোন ব্রাউজারে দেখি তাহলে নিচের ছবির  মতো আসবেএটি কোডের আউটপুট। আর  This is a simple web page এই লেখটিই এইচটিএমএল ইলিমেন্ট।

Screenshot_3

            দুই ধরনের এলিমেন্ট  রয়েছে ,ব্লক লেভেল এবং ইনলাইন এলিমেন্ট।

  ব্লকলেভেল এলিমেন্ট :

 এই ধরনের এলিমেন্টগুলো তার ডানে বামে পুরো সব  জায়গা দখল করে থাকে,  এধরনের এলিমেন্টগুলো শুরু হয় নতুন লাইনে (যখন ব্রাউজারে প্রদর্শন করবে)  একটি ব্লক তৈরী করে। যেমন: div, p, h1, ul, li ইত্যাদি ব্লকলেভেল এলিমেন্ট। 

   ইনলাইন এলিমেন্ট :

     ইনলাইন এলিমেন্টগুলি দিয়ে নতুন লাইন শুরু হয়না এগুলো লাইনের যে কোন স্থানে দেয়া যায়। উদাহরনঃ a, i, b, span, strong ইত্যাদি ইনলাইন এলিমেন্ট নিচের কোডটি  যেকোনো এডিটরে লিখে বা কপি পেস্ট করি, 

 

   html>

    <title>

           Home page

     </title>

<body>

<h1> This is a simple web page</h1>

<p>This is an  example  of paragraph. I am <span> practicing</span> here.</p>
<strong>I AM INLINE ELEMENT</strong>
<a href=” http://sourcetune.com/”>
 ‘a’ is a inline element </a>

    </body>

</html>

   এর পর ব্রাউজারে ওপেন করলে নিচের ছবির মতো আসবে। 

Screenshot_2

  এম্পটি এলিমেন্টঃ

   কিছু কিছু HTML এলিমেন্টের কনটেন্ট থাকে না, আর কনটেন্ট নেই এমন ধরনের HTML এলিমেন্টকে এম্পটি এলিমেন্ট বলে। এই এলিমেন্টগুলো স্টার্ট ট্যাগেই শেষ হয়ে যেতে পারে। যেমন- <br/> হলো একটি এম্পটি এলিমেন্ট এর কোন ক্লোজিং ট্যাগ নেই। এই এলিমেন্টকে লাইনের মাঝে ব্রেক দেওয়ার জন্য <br /> ব্যবহার করা হয়

মনে রাখতে হবে HTML ট্যাগগুলো কেস সেনসিটিভ নয়। কিন্তু ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) এর পরামর্শ হল লোয়ারকেস ট্যাগ ব্যবহার করা। আর  অধিকাংশ HTML এলিমেন্টের অ্যাট্রিবিঊট থাকতে পারে।

আগামী পর্বে লিখবো ‘এট্রিবিউটস (Attribute)’ এট্রিবিউটস  নিয়ে । আজকের পর্ব এখানেই শেষ করছিআগামী পর্ব দেখার আমন্ত্রন জানিয়ে এখানেই শেষ করছি ।

আরো পোস্ট দেখুন

comments