HTML ট্যাগগুলোর পূর্ণাঙ্গ তালিকা খুঁজছেন অনেকেই। আজ কোর্সটিকা ব্লগের পাঠকদের জন্য আমি HTML এর syntax ও HTML tags গুলো নিয়ে বিশদ আলোচনা করবো। এই ব্লগটি পড়ার পরে আপনাদের কাজ হচ্ছে ট্যাগ গুলো বুঝে বুঝে মুখস্ত করা।
চলুন জেনে নেই HTML ট্যাগ আসলে কী?
HTML ট্যাগ হচ্ছে একটি ব্রাকেট দ্বারা আবৃত (<>) কিছু শব্দ যেখানে কিছু কী-ওয়ার্ড থাকে এবং এই কী-ওয়ার্ডই নির্দেশ করে ওয়েবপেজের কন্টেন্টকে কীভাবে দেখাবে। HTML Tags এর ক্ষেত্রে (<>) এবং (</>) এই দুটি চিহ্ন ব্যবহার করা হয়ে থাকে। প্রথম ট্যাগটিকে (<>) ওপেনিং ট্যাগ বা শুরুর ট্যাগ বলে এবং দ্বিতীয়টিকে (</>) ক্লোজিং ট্যাগ বা শেষ ট্যাগ বলে।
HTML ট্যাগকে দুই ভাবে ভাগ করা যায়:
- Single ট্যাগ: যে সকল এইচটিএমএল ট্যাগে কোনো ক্লোজিং ট্যাগ থাকে না, শুধু ওপেনিং ট্যাগ থাকে তাদেরকে Single ট্যাগ বলা হয় । যেমন: লাইন ব্রেকের জন্য <br> ট্যাগ ব্যবহার করা হয়। এটির কোনো ক্লোজিং ট্যাগ নেই। ঠিক একই ভাবে <img>, <link> এবং <hr> ট্যাগগুলোও Single HTML Tag। এই ট্যাগগুলোর কোনো কোনো ক্লোজিং ট্যাগ নেই।
- Container ট্যাগ: যে সকল এইচটিএমএল ট্যাগে ওপেনিং এবং ক্লোজিং ট্যাগ উভই থাকে এবং ট্যাগ দুটির মধ্যে কন্টেন্ট থাকে তাদেরকে Container ট্যাগ বলে। যেমন: <h2>…..</h2>, অথবা <p>…………</p> ইত্যাদি।
| আরো দেখুন: লক্ষ্য যদি হয় ওয়েব ডিজাইন, জানতে হবে যেগুলো
| আরো দেখুন: ওয়েব ডিজাইন শেখার জন্য কোর্স করা কি খুব বেশি জরুরী
HTML ট্যাগের কার্যকরী নির্দিষ্ট এলাকা:
যদি কোনো একটি কন্টেন্টের শুরুতে ওপেনিং ট্যাগ <> ব্যবহার করা হয় এবং কন্টেন্টের যেকোনো যায়গায় ক্লোজিং ট্যাগ </> দিয়ে দেয়া হয়, তাহলে যেখানে ক্লোজিং ট্যাগ দেয়া হয়েছে সেখান পর্যন্ত ট্যাগটির কার্যকারিতা থাকে । একটি উদাহরণ দিলে বিষয়টা পরিষ্কার হয়ে যাবে।
উপরে United States এই বাক্যটি লক্ষ্য করুন। এখানে United States বাক্যটিতে United শব্দটি আন্ডারলাইন করা। কিন্তু States শব্দটি আন্ডারলাইন করা নেই। কারণ, আমি যখন কোডটি লিখেছিলাম তখন ক্লোজিং ট্যাগ United এর পরেই দিয়েছিলাম। অর্থাৎ <u> United </u> States। এ জন্য শুধু United শব্দটি আন্ডারলাইন হয়েছে।
অপরদিকে United States বাক্যটি সম্পূর্ণই আন্ডারলাইন। কারণ, আমি কোডটি এই ভাবেই লিখেছিলাম <u> United States </u>। একটি ট্যাগ কোথা থেকে কোন অবধি কাজ করবে আশা করি বোঝাতে পেরেছি। কোন প্রকার সমস্যা হলে আমার সাথে ফেসবুকে যুক্ত হতে পারেন এই লিংক থেকে।
| আরো দেখুন: ডাউনলোড করুন Zen Coding এর সাথে Notepad++
HTML দিয়ে একটি ওয়েব পেজ ডিজাইন করার জন্য আপনাকে বিভিন্ন প্রকার ট্যাগ নিয়ে কাজ করতে হবে। এক একটি ট্যাগের প্রয়োগ ও কার্যক্ষমতা এক এক রকমের। নিচে বিভিন্ন প্রকার HTML ট্যাগের নাম ও ব্যবহার ধরন সম্পর্কে সংক্ষেপে আলোচনা করা হলে।
ট্যাগের নাম | ট্যাগের ব্যবহার |
<!–….–> | কমেন্ট বা মন্তব্য লেখার জন্য |
<!DOCTYPE> | ডকুমেন্টটি কী ধরণের তা ব্রাউজারকে বোঝানোর জন্য |
<html>…….</html> | ব্রাউজারকে HTML ডকুমেন্ট বোঝানোর জন্য |
<head>…..</head> | HTML ডকুমেন্টে head অংশ নির্ধারণ করার জন্য |
<title>……</title> | ব্রাউজারে ওয়েব পেজের টাইটেল প্রদর্শনের জন্য |
<link>…</link> | বিভিন্ন ফাইলকে সংযুক্ত করার জন্য |
<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> | এটি দ্বারা শিরোনাম (Heading ) নির্দেশ করে । এটি h1 থেকে h6 পর্যন্ত রয়েছে |
<table>…..</table> | টেবিল তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<div>…..</div> | Division তৈরিতে এই ট্যাগ ব্যবহার করা হয় |
<row>….</row> | যেকোনো রো বা সারি তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<col>…..</col> | যেকোনো কলাম তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<tr>….</tr> | টেবিলের রো বা সারি তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<td>….</td> | টেবিলের সেল তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<th>…..</th> | টেবিলের হেডিং বা শিরোনাম তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<hr/> | ভূমির সমান্তরাল রেখা তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<input>…..</input> | যেকোনো ধরনের ইনপুট ফিল্ড তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<list>……</list> | লিস্ট তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<ol>…..</ol> | অর্ডার লিস্ট তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<ul>….</ul> | আন অর্ডার লিস্ট তৈরি করার ক্ষেত্রে ব্যবহার করা হয় |
<u>….</u> | আন্ডারলাইন করার ক্ষেত্রে ব্যবহার করা হয় |
<sub>…..</sub> | কোনো টেক্সটকে একটু নিচে স্থাপন করার ক্ষেত্রে ব্যবহার করা হয় |
তথ্যসূত্র: টিউনার পেজ
আপনার মোবাইল বা কম্পিউটারে ট্যাগের তালিকাটি পিডিএফ ফাইলে সংরক্ষণের জন্য নিচের ফাইলটি ডাউনলোড করুন।
প্রিয় পাঠক, কোর্সটিকায় আপনি কোন বিষয়ে লেখা চান, তা লিখে নিচে কমেন্ট করুন। ওয়েব ডিজাইন, ডেভেলপমেন্টে এবং ফ্রিল্যান্সিং শিখতে আমাদের ফেসবুক গ্রুপে যোগ দিন।
এতটুকুই?? হয়ে গেল??
এইচটিএমএল এর অনেক ট্যাগ মিস হয়ে গেসে ভাইয়া।
আশা করি পার্ট 2 পাব।
ভালো থাকবেন। ধন্যবাদ।
হ্যাঁ, আরো অনেক ট্যাগ আছে, যেগুলো যোগ করা হয়নি। তবে আপডেটের কাজ চলছে। তবে আপনি ইচ্ছে করলে ডাউনলোড লিংকে দেয়া অতিরিক্ত একটি ইংরেজী পিডিএফ ফাইল পড়তে পারেন। যেখানে সবগুলো দেয়া আছে।
Good initiative