Wednesday , 16 October 2019
Home » Web Design » HTML বাংলা টিউটোরিয়াল(পর্ব-৫)Elements in HTML.

HTML বাংলা টিউটোরিয়াল(পর্ব-৫)Elements in HTML.

হ্যালো বন্ধুরা,

আসসালামু আলাইকুম

মাইরেভিনিউয়ার্স এইচটিএমএল বাংলা টিউটোরিয়াল এর ৫ম পর্বে আপনাদের সবাইকে স্বাগতম ,সবাই কেমন আছেন আশা করি ভাল আছেন,আজকে আমাদের এইচটিএমএল টিউটোরিয়াল এর ৫ম পর্ব আর আজকের পর্বে আমরা আলোচনা করব এইচটিএমএল এর ইলিমেন্ট সম্পর্কে।তাহলে চলুন শুরু করে দেই আজকের আলোচনাঃ

১)এইচটিএমএল ইলিমেন্ট-

ইলিমেন্ট বলতে যখন এইচটিএমএল এর কোন ট্যাগ এর পরিপূর্ণ ব্যবহার হয়, তখন ঐ পুরো ট্যাগ এর ব্যবহারকে একটি
ইলিমেন্ট বলে। যেমন ঃ- <p> একটি ট্যাগ। যখন এই p ট্যাগটির সম্পূর্ণ ব্যবহার হবে, তখন পুরো বিষয়টি মিলে এটি হবে p ইলিমেন্ট।

<p> This is Paragraph Text </p>

১) এখানে <p> ওপেনিং ট্যাগ

২) ) This is Paragraph Text– হচ্ছে p ট্যাগ এর কনটেন্ট

৩) এবং </p> হচ্ছে ক্লোজিং ট্যাগ
এখন এই পুরো বিষয়টি মিলে এটিকে বলা হবে < p > ইলিমেন্ট।
নিচে আরো কিছু উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক –

ইলিমেন্ট এর গঠন

১) ওপেনিং ট্যাগ দিয়ে শুরূ হতে হবে
২) ক্লোজিং ট্যাগ ব্যবহার করে শেষ করতে হবে
৩) ওপেনিং এবং ক্লোজিং ট্যাগ এর ভিতর অন্যান্য ট্যাগ/ইলিমেন্ট অথবা কনটেন্ট থাকবে
৪) এম্পটি ইলিমেন্টকে (যেমন ঃ – hr, br, img ইত্যাদি) ওপেনিং ট্যাগ এর ভিতরই ক্লোজ করতে হবে (< hr/>, < br />,<img src=html.jpg” />)।
৫) প্রায় সকল ইলিমেন্ট এর মধ্যেই অ্যাট্রিবিউট ব্যবহার হতে পারে। যেমন ঃ- <body>, < img>, < a>< abbr > ইত্যাদি।

নেষ্টেড এইচটিএমএল ইলিমেন্ট

প্রতিটি এইচটিএমএল ডকুমেন্ট/পেইজ অসংখ্য ইলিমেন্ট এর সমন্বয়ে গঠিত। এইচটিএমএল এর প্রায় প্রতিটি ইলিমেন্ট অপর কোন ইলিমেন্টকে ধারণ করে এবং যখন কোন ইলিমেন্ট অপর কোন ইলিমেন্টকে ধারণ করে থাকে, তখন পুরো বিষয়টিকে Nested Element (একাধিক ইলিমেন্ট এর ব্যবহার) বলা হয়ে থাকে। নিচে কিছু উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।

এখানে <head> element <body>,h1 and <p> কে ধারন করেছে

এইচটিএমএল এর প্রধান ইলিমেন্টসমূহ

প্রতিটি এইচটিএমএল পেইজ তৈরিতে প্রধান চারটি ইলিমেন্ট ব্যবহৃত হয়, যেগুলো না হলেই নয়। এই ইলিমেন্টগুলো হলো ঃ

১-<html>

2-<head>

3-<title>

4-<body>

<html> Element

কোন এইচটিএমএল ডকুমেন্ট/পেইজ এর প্রধান ইলিমেন্ট হল এই < html > ইলিমেন্ট। এইচটিএমএল পেইজের সমস্ত ইলিমেন্ট/কনটেন্ট এই ইলিমেন্ট এর মধ্যে অবস্থান করে (! DOCTYPE বাদে)। এইচটিএমএল এর ওপেনিং ট্যাগকে সবার প্রথমে (! DOCTYPE এর পরে) এবং ক্লোজিং ট্যাগকে সবার শেষে লিখতে হয়। এক্ষেত্রে আমরা কোন ওয়েবপেজের সোর্স কোড ( Source Code) দেখেও বিষয়টি সম্পর্কে পরিস্কার হতে পারি।

source কোড দেখা

কোন ওয়েবপেজের সোর্স কোড দেখার জন্য প্রথমে ওয়েবপেজের যে কোন জায়গায় মাউসের ডান বাটন ক্লিক করূন।অতঃপর আগত অপশনগুলো থেকে “View Page Source” লেখাটির উপর ক্লিক করূন।

চিত্রঃ view page source এ ক্লিক করা

এবার আপনার সোর্চ কোড টি নিচের চিত্রের মত চলে আসবে।

চিত্রঃ ওয়েব পেইজ এর সোর্স কোড দেখা

< head> Element

কোন ওয়েবপেজের শিরোনাম, ওয়েবপেজ সংক্রান্ত বিভিন্ন তথ্যাবলি, বিভিন্ন CSS (Cascading Style Sheet) Style, Javascript কোড < head > ইলিমেন্ট এর ভিতর লিখতে হয়। < head > ইলিমেন্টকে <html> ওপেনিং ট্যাগ এর পরে-শুরূ এবং < body > এর ওপেনিং ট্যাগ শুরূ হওয়ার পূর্বে-শেষ করতে হয় এবং <head> ইলিমেন্ট এর ওপেনিং এবং ক্লোজিং ট্যাগ (<head>….<head> ) এর ভিতর <head> ইলিমেন্ট এর অন্যান্য ইলিমেন্ট,উপাদান(<title>, <meta>, < base> ইত্যাদি) লিখতে হয়। নিচে একটি উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক ঃ

চিত্রঃ <head> element এর ব্যবহার

হেড ইলিমেন্ট এর ভিত্রে ব্যবহৃত অন্যান্য এলিমেন্ট সমুহঃ

 <title>

 <style>

 <base>

 <link>

 <meta>

<script>

 <noscript>

<title>element

ওয়েবপেজ এর টাইটেল/শিরোনাম এর জন্য < title > ইলিমেন্টটি ব্যবহার করা হয়ে থাকে। টাইটেলকে (টাইটেল ইলিমেন্ট) কোন সম্পূর্ণ ওয়েবপেইজ উপস্থাপন করার মাধ্যম হিসেবেও আখ্যায়িত করা হয়। টাইটেল দেখে কোন একজন ভিজিটর বুঝতে পারেন যে, এটি আসলে কোন ধরণের ওয়েবসাইট। তাছাড়া, সার্চ ইঞ্জিন অপটিমাইজেশন (এসইও) এর ক্ষেত্রেও টাইটেল ইলিমেন্ট অত্যন্ত গুরূত্বপূর্ণ ভূমিকা পালন করে। ওয়েবপেজের টাইটেল ব্যবহারে বিভিন্ন কৌশল ব্যবহার করা যেতে পারে। আর ওয়েবসাইটে এমন বিভিন্ন কৌশল ব্যবহার করে ওয়েবসাইটকে সার্চ ইঞ্জিন রেজাল্টের শীর্ষে নিয়ে আসার জন্য আমাদের ‘‘সার্চ ইঞ্জিন অপটিমাইজেশন’’ টিউটোরিয়াল দেখে নিতে পারেন। কোন ওয়েবপেজের টাইটেল ব্রাউজারের সবার উপরে প্রদর্শিত হয়।

title element এর ব্যবহারঃ

Title ইলিমেন্টকে এইচটিএমএল পেইজের হেড সেকশন এর ভিতর লিখতে হয়।নিচে একটী চিত্রে দেখানো হল।

চিত্রঃuse of title element

চিত্রঃআউটফুট

<body>Element

আমরা কোন ওয়েবপেজের মধ্যে যা কিছু দেখতে পাই (ইমেজ, অডিও, ভিডিও, টেক্সট, লিংক ইত্যাদি), তা সব কিছুই এই < body > ইলিমেন্ট এর অন্তর্ভূক্ত। নিচে একটি উদাহরন এর মাধ্যমে বিষয়টি সম্পর্কে পরিস্কার হওয়া যাক –

চিত্রঃ<Body>ইলিমেন্ট এর উপাদানসমূহ


উপরের চিত্রে মার্ক করা প্রতিটি অংশ, অর্থাৎ কোন ওয়েবপেজে দৃশ্যমান সকল কিছুই < body > ইলিমেন্ট এর অন্তর্ভূক্ত।

< body >ইলিমেন্ট এর ব্যবহারঃ

< body > ইলিমেন্টকে এইচটিএমএল পেইজের < head > এর ক্লোজিং ট্যাগ (</head>) এর পরে-ওপেন এবং <html> এর ক্লোজিং ট্যাগ (</ html >) এর পূর্বে-ক্লোজ করতে হয় এবং ওয়েবপেজে প্রদর্শনের জন্য অন্যান্য সকল ইলিমেন্ট,কনটেন্টকে < body > ইলিমেন্ট এর ওপেনিং এবং ক্লোজিং ট্যাগ (<body> . . . . .</ body > ) এর ভিতর রাখতে হয়। নিচে একটি উদাহরণ এর মাধ্যমে বডি ইলিমেন্ট এর ব্যবহার দেখানো হলো ঃ

কোড বিশেষণ-

body ইলিমেন্ট এ অ্যাট্রিবিউট এর ব্যবহার

এইচটিএমএল এর বডি ইলিমেন্ট এ নিম্নোক্ত অ্যাট্রিবিউটগুলো ব্যবহৃত হয়ে থাকে।

 alink

 background

 bgcolor

 link

 text Ges

 vlink

alink

“active link” এর সংক্ষিপ্ত রূপ হচ্ছে “alink”. এই অ্যাট্রিবিউট ব্যবহার করে লিংকের কালার নির্ধারণ করে দেয়া হয়। ভিজিটর যখন ওয়েবপেজে ব্যবহৃত কোন লিংকের উপর ক্লিক করে, তখন এই অ্যাট্রিবিউটটি কাজ করে। অর্থাৎ,কোন লিংকের উপর ক্লিক করার সময় “alink” অ্যাট্রিবিউট এ ব্যবহার করা কালারটি প্রদর্শিত হবে।

Value :

alink অ্যাট্রিবিউটে value /মান হিসেবে Color নির্ধারণ করা হয়। এইচটিএমএল এ তিনভাবে কালার নির্ধারণ করা যায়।
১. Color name (কালার এর নাম ব্যবহার করে – যেমনঃ ” green “);
২. RGB (Red, Greeen & Blue) Code – RGB মান, যেমন ঃrgb (0,0,0) ) ব্যবহার করে
৩. . Hex (Hexadecimal) কোড ব্যবহার করে – যেমন ঃ- “#0000FF”।
এইচটিএমল কালার নিয়ে টিউটোরিয়াল পরবর্তীতে বিস্তারিত আলোচনা করা হবে।
লিখার নিয়ম ঃ
< body alink=”Color_name অথবা RGB_Code অথবা Hex_Code”>
নিচে alink অ্যাট্রিবিউট এর ব্যবহার দেখানো হলো ঃ

তাহলে বন্ধুরা আজকের পর্ব এখানেই শেষ করতেছি,ইনশাআল্লাহ আগামি পর্বে আমরা এইচটিএমএল এর ইলিমেন্নট নিয়ে আরো আলোচনা করব আরো এলিমেন্ট এর সাথে পরিচিত হব,সবাইকে আগামি পর্বের আমন্ত্রন জানিয়ে শেষ করছি আজকের পর্ব সবাই ভাল থাকবেন আল্লাহ হাফেজ।

About Mir Md Aminul Haque

প্রযোক্তিকে ভালবাসি ,নিত্য জানতে চাই নতুন কিছু,ছড়িয়ে দিতে চাই উজার করে নিজের জ্ঞান সবার মাঝে।

Check Also

বাজেটের মধ্যে Core i3 ডেস্কটপ নিজ হাতে তৈরী করুন

হ্যলো বন্ধুরা,আজকে আমি আপনাদের জন্য নিয়ে এসেছি একদম সুপার ডুপার একটা পোস্ট,পোস্ট টা হচ্ছে বাজেটের…

6 comments

  1. I discovered your blog site on google and check a few of your early posts. Continue to keep up the very good operate. I just additional up your RSS feed to my MSN News Reader. Seeking forward to reading more from you later on!…

  2. Hi would you mind letting me know which hosting company you’re using? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot faster then most. Can you suggest a good internet hosting provider at a honest price? Thank you, I appreciate it!

Leave a Reply

Your email address will not be published.