আসসালামু আলাইকুম । সবাই কেমন আছেন? আমি ভালো আছি ,আশা করি আপনারা ও ভালো আছেন ।Exam এর কারনে অনেকদিন পোস্ট করতে পারিনি আশাকরি এখন থেকে রেগুলার পোস্ট করার চেস্টা করবো ।আমার পোস্টগুলো সাধারনত website ও Programing নিয়ে পোস্ট করবো। সুরু থেকেই সুরু করলাম। আজকের পাঠে HTML এর syntax ও HTML tags (এইচটিএমএল ট্যাগ) নিয়ে আলোচনা করবো ।আপনাদের মধ্যে অনেকেই এগুলো জানেন আর যারা জানেন না আপনাদের কাজ হচ্ছে ট্যাগ গুলো বুঝে-বুঝে মুখস্ত করা ,কথা না বাড়িয়ে কাজের কথায় আসি ।
HTML Syntax:
HTML ট্যাগ হচ্ছে একটি এঙ্গেল ব্রাকেট দ্বারা আবৃত (<>) সেখানে কিছু কী-ওয়ার্ড থাকে এই কী-ওয়ার্ডই নির্দেশ করে ওয়েবপেজের কন্টেন্টকে কীভাবে দেখাবে । HTML Tags এর ক্ষেত্রে (<>) এবং (</>) এই দুটি চিহ্ন ব্যবহার করা হয়ে থাকে । প্রথম ট্যাগটিকে (<>) ওপেনিং ট্যাগ বা শুরুর ট্যাগ বলে এবং দ্বিতীয়টিকে (</>) ক্লোজিং ট্যাগ বা শেষ ট্যাগ বলে ।
ট্যাগকে দুই ভাবে ভাগ করা যায়ঃ
1.Single ট্যাগঃ যেসমস্ত এইচটিএমএল ট্যাগে কোনো ক্লোজিং ট্যাগ থাকেনা,শুধু ওপেনিং ট্যাগ থাকে তাদেরকে Single ট্যাগ বলা হয় ।যেমনঃ লাইন ব্রেকের জন্য <br> ট্যাগ ব্যবহার করা হয় । ইহার কোনো ক্লোজিং ট্যাগ নেই । <br> ট্যাগের মত <img>,<link>,<hr> ইত্যাদি ট্যাগ গুলো ও single html Tag । এই ট্যাগ গুলোর কোনো কোনো ক্লোজিং ট্যাগ নেই ।
2. Container ট্যাগঃ যেসমস্ত এইচটিএমএল ট্যাগে ওপেনিং এবং ক্লোজিং ট্যাগ উভই থাকে এবং ট্যাগ দুটির মধ্যে কন্টেন্ট থাকে তাদেরকে Container ট্যাগ বলে । <h2>…..</h2>,<p>…………</p> ইত্যাদি ।
ট্যাগের কার্যকরী এলাকাঃ
যদি কোনো একটি কন্টেন্টের শুরুতে ওপেনিং ট্যাগ ব্যবহার করা হয় এবং কন্টেন্টের যেকোনো যায়গায় ক্লোজিং ট্যাগ দিয়ে দেওয়া হয় তাহলে যেখানে ক্লোজিং ট্যাগ দেয়া হয়েছে সেখান পর্যন্ত ট্যাগটির কার্যকারিতা থাকবে । একটা উদাহরণ দিলে বিষয়টা পরিষ্কার হয়ে যাবে । যেমনঃ united states এই বাক্যটি লক্ষ্য করেন এখানে United States বাক্যটিতে United আন্ডার লাইন করা কিন্তু States আন্ডার লাইন করা নেই নরমালই আছে কারণ আমি যখন কোডটি লিখেছিলাম তখন ক্লোজিং ট্যাগ United এর পরেই দিয়েছিলাম । অর্থাৎ <u> united </u> states । কিন্তু এই বাক্যটি দেখেন United States এটি পুরাই আন্ডার লাইন করা কারণ আমি কোডটি এই ভাবেই লিখেছিলাম <u> United States </u> । ট্যাগ কথায় থেকে কথায় কাজ করবে আশা করি বুঝাতে পেরেছি । তারপর ও যারা না বুঝেন তারা ফেসবুকে আমাকে মেসেজ দিয়েন ।
এইচটিএমএল এর সকল ট্যাগ এর তালিকা (All HTML Tags List)
| ট্যাগের নাম | ট্যাগের বিবরণ |
|---|---|
| <!–….–> | মন্তব্য লেখার জন্য |
| <!DOCTYPE> | ডকুমেন্টটি কী ধরণের তা ব্রাউজারকে বোঝানোর জন্য |
| <html>…….</html> | HTML ডকুমেন্ট বোঝানোর জন্য |
| <head>…..</head> | HTML ডকুমেন্টে head অংশ নির্ধারণ করে । |
| <title>……</title> | ডকুমেন্টের টাইটেল বোঝানোর জন্য,ব্রাউজারের টাইটেল বারে প্রদর্শিত হয় |
| <body>…</body> | body ট্যাগের ভিতর যা লিখা হবে তা ওয়েব পেজে প্রদর্শিত হবে |
| <b>…..</b> | টেক্সটকে বোল্ড করার জন্য |
| <em>….</em> | টেক্সটকে emphasized করার জন্য |
| <i>…..</i> | কোনো টেক্সটকে italic করার জন্য |
| <small>…</small> | কোনো টেক্সটকে ছোট করার জন্য |
| <big>…</big> | টেক্সটকে বড় করার জন্য |
| <blink>….</blink> | টেক্সটকে একবার প্রদর্শন করবে আবার করবেনা |
| <blockquote>… </blockquote> | বিশেষ উক্তি প্রকাশ করার জন্য |
| <strike>…. </strike> |
টেক্সটের মাঝে কাটা দাগ দিতে |
| <del>….</del> | টেক্সটের মাঝে কাটা দাগ দিতে |
| <strong>…</strong> | টেক্সটকে বোল্ড করার জন্য |
| <a>….</a> | এটি একটি এঙ্কর ট্যাগ যা লিঙ্ক তৈরির ক্ষেত্রে ব্যবহার করা হয় |
| <img>…</img> | ছবি সংযুক্ত করতে ব্যবহার করা হয় |
| <abbr>…..</abbr> | সংক্ষিপ্ত শব্দের ক্ষেত্রে ব্যবহার করা হয় |
| <samp>….</samp> | কোনো বিষয়কে নমুনা হিসেবে দেখাতে |
| <code>….</code> | কোনো বিশেষ বাক্যকে Fixed-Width ফরমেটে লিখতে ব্যবহার করতে হয় |
| <form>….</form> | যেকোনো ফর্ম তৈরি করার জন্য |
| <h1>…….</h1> . <h6>….</h6> |
এটি দ্বারা শিরোনাম (Heading ) নির্দেশ করে । এটি h1 থেকে h6 পর্যন্ত রয়েছে |
| <table>…..</table> | টেবিল তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
|
…
|
Division তৈরিতে এই ট্যাগ ব্যবহার করা হয় |
| <row>….</row> | যেকোনো রো বা সারি তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <col>…..</col> | যেকোনো কলাম তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <tr>….</tr> | টেবিলের রো বা সারি তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <td>….</td> | টেবিলের সেল তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <th>…..</th> | টেবিলের হেডিং বা শিরোনাম তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <hr/> | ভূমির সমান্তরাল রেখা তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <input>…..</input> | যেকোনো ধরনের ইনপুট ফিল্ড তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <list>……</list> | লিস্ট তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <ol>…..</ol> | অর্ডার লিস্ট তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <ul>….</ul> | আন অর্ডার লিস্ট তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <u>….</u> | আন্ডার লাইন করার ক্ষেত্রে ব্যবহার করা হয় |
| <sub>…..</sub> | কোনো টেক্সটকে একটু নিচে স্থাপন করার ক্ষেত্রে ব্যবহার করা হয় |
| <sup>………</sup> | কোনো টেক্সটকে একটু উপরে স্থাপন করার ক্ষেত্রে ব্যবহার করা হয় |
| …… | কোনো ওয়েব পেজকে ফ্রেমের মধ্যে রাখতে ব্যবহার করা হয় |
| <p>……</p> | প্যারাগ্রাফ তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <style>……</style> | ওয়েব পেজকে স্টাইল করতে ব্যবহার করা হয় |
| <font>…..</font> | ফন্টের সাইজ ও কালার নির্ধারণ করার ক্ষেত্রে ব্যবহার করা হয় |
| <br/> | লাইন ব্রেক করার ক্ষেত্রে ব্যবহার করা হয় |
| <marquee>……</marquee> | চলমান লিখা তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
| <pre>…..</pre> | একপাশে কবিতার মত লাইন তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |