HTML এর ট্যাগ ও সিনটেক্স (HTML Tags & Syntax)
HTML এর ট্যাগ (HTML Tags) :
HTML ব্যবহার করে ওয়েব পেইজ ডিজাইন করা হয়। HTML-এর দুটি অংশ: একটি Head এবং অপরটি Body।
Head অংশ : Head অংশে ওয়েব পেইজের টাইটেল, স্টাইল, স্ক্রিপ্ট ও ওয়েব পেইজ সম্পর্কে ধারণা দেওয়া থাকে। এটি ডকুমেন্টের মূল অংশ যাতে তথ্য প্রদর্শন করা হয়।
Body অংশ : Body অংশে যাবতীয় দৃশ্যমান তথ্য যেমন- লেখা, ছবি, টেবিল, অডিও, ভিডিও ইত্যাদি থাকে। এটি ডকুমেন্টের মূল অংশ যাতে তথ্য প্রদর্শন করা হয়।
কিছু ট্যাগ ও অ্যাট্রিবিউটের সমন্বয়ে HTML-এ ফাইল তৈরি করা হয় । ট্যাগ যেকোনো নির্দেশকে সুনির্দিষ্ট করে দেয়। ট্যাগ নির্দিষ্ট কোনো নির্দেশের সাংকেতিক চিহ্ন হিসেবে বসে। এই চিহ্ন অ্যাঙ্গেল ব্রাকেটের মধ্যে বসে। ট্যাগের বানান সঠিকভাবে লিখতে হয়। যেমন Bold নামক শব্দটি দ্বারা HTML টেক্সটকে বোল্ড করা হয়। Bold এর ট্যাগ হলো <b>। ট্যাগ একবার শুরু করলে শেষ করতে </> চিহ্ন ব্যবহার করতে হয়। তাহলে Bold এর শুরু ও শেষ ট্যাগ হবে <b> ও </b>। HTML -এর ট্যাগ ও সিনট্যাক্সগুলো হলো ট্যাগ (Tag), অ্যাট্রিবিউট (Attribute) ও এলিমেন্টস (Elements)।
ট্যাগ (Tag) :
< > ও </> এবং এর মধ্যে লেখা একটি কীওয়ার্ডকে একত্রে ট্যাগ বলা হয়। HTML প্রোগ্রাম লেখার জন্য < > ও </> দুটি চিহ্ন এবং এর মধ্যে কিছু শব্দ যেমন html, head, title, body ইত্যাদি কীওয়ার্ড ব্যবহার করা হয়।
একটি ট্যাগের মূলত: তিনটি অংশ থাকে। যথা- ক. শুরু ট্যাগ, খ. তথ্য বা ধারণকৃত অংশ, গ. শেষ ট্যাগ।
যেমন- <h1> MPSC </h1>। এখানে <h1> হলো শুরু ট্যাগ। MPSC হলো তথ্য বা ধারণকৃত অংশ এবং </h1> হলো শেষ ট্যাগ।
HTML -এ ট্যাগ দুই ধরনের। যথা- ১. কনটেইনার ট্যাগ (Container Tag), ও ২. এম্পটি ট্যাগ (Empty Tag)।
১. কনটেইনার ট্যাগ (Container Tag) : যে ট্যাগ ডকুমেন্ট নির্দেশনায় শুরু ও শেষ ট্যাগ চিহ্ন ব্যবহার করা হয় তাকে কনটেইনার ট্যাগ বলে। এ ধরনের ট্যাগে শুরু ও শেষ ট্যাগ থাকে। <html> এবং </html>। এখানে <html> হলো শুরু ট্যাগ এবং </html> হলো শেষ ট্যাগ।
২. এম্পটি ট্যাগ (Empty Tag) : যে ট্যাগ ডকুমেন্ট নির্দেশনায় শুধু একবার ব্যবহার করা হয় তাকে এম্পটি ট্যাগ বলে। ইনপুট ট্যাগ, ইমেজ ট্যাগ ইত্যাদির শুরু ট্যাগ থাকলেও শেষ ট্যাগ নেই। এ ট্যাগগুলো একটু ভিন্ন। যেমন- <br>, <hr>, <img>। এখানে <br> দ্বারা এক লাইন ব্রেক তৈরি, <hr> দ্বারা সমান্তরাল লাইন তৈরি এবং <img> দ্বারা ইমেজ তৈরি বুঝায়।
ট্যাগ ব্যবহারের নিয়ম:
HTML -এ ট্যাগের বানান কঠোরভাবে নিয়ন্ত্রিত। যেকোনো ট্যাগ লেখার সময় যথার্থ বানানে লিখতে হয়। যেকোনো ট্যাগ লেখার সময় ট্যাগটি < > চিহ্নের মধ্যে লিখতে হয়।
প্রতিটি ট্যাগের একটি সুনির্দিষ্ট সীমারেখা রয়েছে। সেই সীমারেখাকে ইচ্ছেমতো অতিক্রম করা যাবে না। ট্যাগের শুরু < > চিহ্ন দিয়ে এবং শেষ হবে </> চিহ্ন দিয়ে। যেমন: <html>… </html>।
HTML -এর মৌলিক ট্যাগসমূহ :
| ট্যাগ | বর্ণনা |
| <html> </html> | html এর ডকুমেন্ট বর্ণনা করে। |
| <body> </body> | প্রোগ্রামের মূল Content অংশ নির্দেশ করে। |
| <title> </title> | ডকুমেন্ট টাইটেল নির্দেশ করে। |
| <head> </head> | প্রোগ্রামের হেড অংশ নির্দেশ করে। |
| <h1> to <h6> | হেডিং 1 থেকে হেডিং 6 পর্যন্ত বর্ণনা করে। |
| <p> </p> | একটি প্যারাগ্রাফ বর্ণনা করে। |
| <a> </a> | Anchor ট্যাগ এবং লিঙ্ক তৈরি করে। |
| <b> </b> | Bold টেক্সট নির্দেশ করে। |
| <i> </i> | Italic টেক্সট নির্দেশ করে। |
| <u> </u> | Underline টেক্সট নির্দেশ করে। |
| <abbr> </abbr> | Abbreviation ট্যাগ নির্দেশ করে। |
| <em> </em> | Emphasized টেক্সট নির্দেশ করে। |
| <del> </del> | টেক্সটে কাঁটা নির্দেশ করে। |
| <mark> </mark> | টেক্সটের মার্ক নির্দেশ করে। |
| <s> </s> | Strike টেক্সট নির্দেশ করে। |
| <table> </table> | টেবিল তৈরিতে ব্যবহৃত হয়। |
| <col> </col> | টেবিলের কলাম তৈরিতে ব্যবহৃত হয়। |
| <td> </td> | টেবিলের সেল তৈরিতে ব্যবহৃত হয়। |
| <tr> </tr> | টেবিলের সারি তৈরিতে ব্যবহৃত হয়। |
| <th> </th> | টেবিলের হেডিং তৈরিতে ব্যবহৃত হয়। |
| <n> </n> | নতুন লাইন সংযোজন করার ক্ষেত্রে। |
| <code> </code> | প্রোগ্রামিং টেক্সটগুলো যেভাবে লেখা হয় সেভাবে দেখার জন্য ব্যবহৃত হয়। |
| <pre> </pre> | ট্যাব, স্পেস, লাইন ব্রেক যেভাবে দেওয়া থাকবে সেইভাবে দেখার জন্য ব্যবহৃত হয়। |
| <tt> </tt> | টাইপ রাইটারের লেখার মত দেখার জন্য ব্যবহৃত হয়। |
| <command> </command> | কমান্ড বাটন তৈরিতে ব্যবহৃত হয়। |
| <strong> </strong> | Strong টেক্সট নির্দেশ করে। |
| <small> </small> | স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে। |
| <big> </big> | স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে। |
| <sub> </sub> | Subscripted Text নির্দেশ করে। |
| <sup> </sup> | Superscripted Text নির্দেশ করে। |
| <blink> </blink> | টেক্সটকে Blinkong করে। |
| <q> </q> | টেক্সটকে কোটেশনের মধ্যে প্রদর্শন করে। |
| <br> | এক লাইন ফাঁকা বা ব্রেক তৈরি করে। |
| <hr> | একটি হরিজন্টাল রুল বর্ণনা করে। |
| <!–> | একটি কমান্ড বর্ণনা করে। |
| <div> | ডকুমেন্টের মধ্যে কোন অংশকে বিভক্ত করে। |
| <a href> | একটি ওয়েব পেইজের সাথে আরেকটি ওয়েব পেইজ লিঙ্ক করতে ব্যবহৃত হয়। |
| <img> | ছবিকে বর্ণনা করে। |
| <li> </li> | তালিকা বর্ণনা করে। |
| <ol> </ol> | Order list হিসেবে তালিকা দেখাবে। |
| <ul> </ul> | Unorder list হিসেবে তালিকা দেখাবে। |
H2SO4 লেখার HTML কোড : H<sub> 2 </sub> SO <sub> 4 </sub>
(a + b)2 = a2 + 2ab + b2 লেখার HTML কোড : (a + b) <sup> 2 </sup> = a <sup> 2 </sup> + 2ab + b <sup> 2 </sup>
(a1 + b)2 = a12 + 2a1b + b2 লেখার HTML কোড : a <sub>1 </sub> + b) <sup>2 </sup> = a <sub>1 </sub> <sup> 2 </sup> +2a<sub>1 </sub> b + b<sup>2 </sup>
abc লেখার HTML কোড : a<sup> b <sup> c </sup>
অ্যাট্রিবিউট (Attribute) :
HTML -এ যে এলিমেন্টগুলো রয়েছে তাতে অতিরিক্ত তথ্য প্রকাশ করার জন্য যে পদ্ধতি ব্যবহার করা হয় তাকে অ্যাট্রিবিউট বলে। অ্যাট্রিবিউট ট্যাগের নির্দেশকে সুনির্দিষ্টভাবে নির্ধারণ করে। যেমন- HTML -এ হরিজন্টাল লাইনের জন্য <hr> ট্যাগ বসে। এই হরিজন্টাল লাইনটি বাম, মধ্য বা ডান বরাবর বসাতে হলে অ্যাট্রিবিউট বসাতে হয়। যেমন- ডান দিকে বসাতে হলে <hr> এর ট্যাগ হবে <align = “right”>। সব মিলিয়ে ডান মার্জিন বরাবর বসানোর জন্য লিখতে হবে <hr align = “right”>। যেমন, একটি টেবিলের দৈর্ঘ্য, প্রস্থ দেওয়ার জন্য অ্যাট্রিবিউট ব্যবহার করা হয়। উদাহরণস্বরূপ, <table width = “200” height = “100”>
| ট্যাগ | অ্যাট্রিবিউট |
| <font> | size = “10” face = “Times New Roman” color = “Red” |
| <body> | bgcolor = “yellow” background = “image.jpg” |
| <hr> | <hr align = “right”> |
| <table> | <table border = ‘1’ width = “200” height = “100”> |
এলিমেন্টস (Elements) :
HTML -এ যেকোনো শুরু ও শেষ ট্যাগ এবং মাঝের অংশকে এলিমেন্টস বলা হয়।
| <tagname> | content | </tagname> |
| শুরু ট্যাগ | এলিমেন্ট কনটেন্ট | শেষ ট্যাগ |
| <hl> | Lecture Publications Ltd. | </hl> |
| <P> | HSC ICT Book | </P> |
একটি এলিমেন্টস-এর তিনটি অংশ থাকে। যথা-
<p> : প্যারাগ্রাফ শুরু করার ট্যাগ।
Element Content : প্যারাগ্রাফ লেখা।
</p> : প্যারাগ্রাফ শেষ করার ট্যাগ।
কিছু কিছু ট্যাগের কোন এলিমেন্টস থাকে না। যেমন, <<br> বা <br />, <img> বা <img /> ইত্যাদি।
সাধারণত যেসব ট্যাগের শেষ ট্যাগ থাকে না তাদের এলিমেন্টও থাকে না। এ ধরনের শুরু ট্যাগের মধ্যেই / চিহ্নটি অন্তর্ভুক্ত থাকে এবং এর আগে একটি স্পেস দিতে হয়।