HTML Tag কি?
ট্যাগ হচ্ছে এইচটিএমএল এর একটি মৌলিক বিষয়। ট্যাগের মাধ্যমেই তৈরি হয় ওয়েবসাইটের স্ট্রাকচার । এইচটিএমএল এ কৌণিক ব্রাকেট (<> এবং </>) এবং এর মধ্যে লেখা' শব্দ যেমন, head, body, html ইত্যাদি শব্দ গুলোকে keyword বলা হয়। কৌণিক ব্রাকেট(<>) এর মাঝে লেখা প্রতিটি keyword কে একসাথে ট্যাগ বা এইচটিএমএল ট্যাগ বলে।
প্রতিটি কাজের জন্য আলাদা আলাদা এইচটিএমএল ট্যাগ রয়েছে যেগুলো দ্বারা আমরা কোন একটি কাজ ব্রাউজারকে করার জন্য নির্দেশ দিতে পারি বা কোন একটা ডিজাইনকে ব্রাউজার কে দেখানোর জন্য নির্দেশ দিতে পারি।
আপনি ওয়েবসাইট ডিজাইনিং বা ডেভলপমেন্ট শেখার সময় দেখতে পাবেন ওয়েবপেজে ছবি দেখানোর জন্য এক ধরনের ট্যাগ ব্যবহার করা হয়ে থাকে আবার লিংক দেখানোর জন্য অন্য ধরনের HTML tag ব্যবহার করা হয়ে থাকে । এমন ভিন্ন ভিন্ন কাজের জন্য ভিন্ন ভিন্ন ট্যাগ ব্যাবহার করা হয় ।
এইচটিএমএল ট্যাগ মূলত দুই ধরনের হতে পারে !
কনটেইনার ট্যাগ এবং এমটি ট্যাগ।
কনটেইনার ট্যাগ এর শুরু এবং শেষ ট্যাগ থাকে। ডকুমেন্ট ফরম্যাটিং এর জন্য এই ধরনের ট্যাগ ব্যবহার করা হয়।
এমটি ট্যাগ এর শুরুতে থাকে কিন্তু শেষ ট্যাগ থাকেনা। চলুন বিভিন্ন এইচটিএমএল ট্যাগ সম্পর্কে জেনে নেওয়া যাক।
<html> </html> ট্যাগ:
এটি মূলত ব্যবহৃত হয় পুরো এইচটিএমএল ডকুমেন্টকে নির্দেশ করার জন্য। অর্থাৎ একটি এইচটিএমএল ডকুমেন্ট এর মধ্যে শুরু এবং শেষ নির্ধারণ করার জন্য মূলত এটি ব্যবহার করা হয়।
এর মাধ্যমে ব্রাউজারকে বুঝানো হয় যে অংশটুকু এই ট্যাগ এর মধ্যে রয়েছে সেটাকে এইচটিএমএল হিসাবে গণ্য করার জন্য। অর্থাৎ এইচটিএমএল ট্যাগ দিয়ে বোঝানো হয় যে ওই ট্যাগের ভিতরে সকল ফাইল এইচটিএমএল ফাইল ।
<head></head> ট্যাগ:
চিঠি বা অন্য কিছু লিখতে গেলে আমরা তার হেডিং দিই । হেডিং দ্বারা বুঝায় যে নিচের লেখায় কি আছে !
এটাকে মূলত ব্যবহার করা হয় বিভিন্ন মেটাডাটা কে নির্দেশ করার জন্য। ওয়েব পেজের নাম ওয়েবপেজে বিভিন্ন ধরনের ফাইল যুক্ত করা ইত্যাদির জন্য মূলত এই সেকশনটিকে ব্যবহার করা হয়। এই সেকশন এর মাধ্যমে বোঝানো হয়ে থাকে যে ওয়েবসাইটটার নাম কি। এছাড়া বিভিন্ন এক্সটার্নাল সিএসএস, জাভাস্ক্রিপ্ট যুক্ত করার জন্য এই অংশটি অনেক বেশি গুরুত্বপূর্ণ ভূমিকা পালন করে। বলতে গেলে ওয়েবসাইটের জন্য মাথা স্বরূপ হচ্ছে এই ট্যাগটি।
<title></title> ট্যাগ:
এই অংশটি মূলত ব্যবহার করা হয়ে থাকে একটি ওয়েব পেজের নাম নির্ধারণ করার জন্য । কোনো ওয়েবসাইট অনেকগুলো ওয়েবপেইজের সমন্বয়ে গঠিত । কোন পেজ কোন বিষয়ের উপর সেটি নির্ধারণ করে এই টাইটেল ট্যাগ ।
এটির মধ্যে যে নামটি দেওয়া হয় সেই নামটি মূলত ব্রাউজারে দেখানো হয়ে থাকে। এ ছাড়া আমরা যেকোন পেইজের যে নামটা দেখতে পাই সেটাও মূলত এখানে লেখা হয়। তবে ফাইল নেম আর এই টাইটেল নেম এক নাও হতে পারে।
<body></body> ট্যাগ:
একজন ইউজার ওয়েবপেজে যে সকল বিষয় দেখতে পান তার সবকিছুই মূলত এখানে থাকে। এটা মূলত একটি পেজের সকল ধরনের কনটেন্ট এর ধারক। বডি ট্যাগের ভিতরে সব রকম কনটেন্ট পাওয়া যায় ।
Heading tag:
আমরা কোন কিছু লেখার সময় যেমন তার উপর একটু বড় করে উক্ত বিষয়বস্তুটি লিখি সেটি এইচটিএমএল এর হেডিং আর ওয়েবসাইটে হেডিং তৈরি করতে যেটা ট্যাগ ব্যবহার করা হয় তাকেই হেডিং ট্যাগ বলে ।
এইচটিএমএল এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য হেডিং ট্যাগ ব্যবহার করা হয়। এইচটিএমএল এর মোট ছয় ধরনের হেডিং ট্যাগ রয়েছে।<h1> থেকে <h6> পর্যন্ত বিস্তৃত। সবচেয়ে বড় সাইজের শিরোনাম লেখার প্রয়োজন হয় তবে <h1></h1> এর মাঝে লেখা হয়। এভাবে পর্যায়ক্রমে সবচেয়ে ছোট অক্ষর প্রদর্শন করা যায় <h6></h6> এর মাধ্যমে।
<div></div> ট্যাগ:
এই ট্যাগটির মাধ্যমে আমরা একটি ওয়েবসাইটকে বিভিন্ন সেকশনে বিভক্ত করতে পারি। সেই বিভক্ত কৃত অবস্থানগুলোতে আমরা চাইলে বিভিন্ন ধরনের স্টাইল যুক্ত করতে পারি বা ডিজাইন যুক্ত করতে পারি। যদিও এই অংশটি কে মূলত বেশি ব্যবহার করা হয় সিএসএস এর জন্য। অনেক সুন্দর করে পেজের ডিজাইন গড়ে তোলার জন্য এর প্রয়োজনীয়তা অনেক বেশি।
<p></p> ট্যাগ:
আমরা যখন লিখি তখন অনেক সময় প্যারা প্যারা করে লেখার চেষ্টা করি । এক একটা প্যারা একই বিষয়ে লেখার চেষ্টা করি । এতে করে বিশেষ বিশেষ বিষয়বস্তু একটি প্যারায় সহজে পেয়ে যাওয়া যায় । ঠিক তেমনি যাতে আপনার ওয়েবসাইটের একটি বিশেষ প্যারাকে গুগল সার্চ ইঞ্জিন অন্যের সামনে তুলে ধরতে পারে সেজন্য প্যারাগ্রাফ ট্যাগ খুবই গুরুত্বপূর্ণ ।
প্যারাগ্রাফ ট্যাগ একটি ওয়েবসাইটের জন্য অনেক গুরুত্বপূর্ণ। কোন লেখাকে প্যারাগ্রাফ আকারে তুলে ধরার জন্য আমাদেরকে অবশ্যই প্যারাগ্রাফ ট্যাগ ব্যবহার করতে হবে। এই ট্যাগের মাধ্যমে আমরা নির্দেশ করতে পারি কোন একটি লেখা প্যারাগ্রাফ আকারের থাকার জন্য।
প্যারাগ্রাফ ট্যাগ ব্যবহার না করলে যেকোনো লেখাকে নরমাল টেক্সট আকারে ধরা হয়। কিন্তু যখন প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় তখন সেই টেক্সট টাকে মূলত একটি প্যারাগ্রাফ আকারে ধরা হয়। প্যারাগ্রাফ আকারে ধরার ফলে যেকোনো সার্চ ইঞ্জিন বুঝতে পারে যে এই লেখাটি মূলত একটি প্যারাগ্রাফ এর অংশ। লেখাকে ফরমেটিং করার জন্য এর গুরুত্ব অনেক বেশি।
<br/> ট্যাগ:
বিআর মানে হচ্ছে ব্রেক যার অর্থ ভেঙে ফেলা । এইচটিএমএল এ লেখার সময় লেখা ভেঙ্গে বা আলাদা করতে চাইলে এইটা ব্যবহার করতে হয় । আপনি যখন এইচটিএমএল কোডিং করবেন তখন যদি ইন্টার প্রেস করেন অর্থাৎ পরবর্তী লাইনে যাওয়ার চেষ্টা করেন কিংবা অধিক সংখ্যক স্পেস ব্যবহার করে এটি ব্রাউজারে কোন প্রতিক্রিয়া ফেলবে না তাই এইটা ব্যবহার করা হয় । একই কাজ চাইলে আপনি প্যারাগ্রাফ ট্যাগ ব্যবহার করেও করতে পারেন ।
যেকোনো এলিমেন্ট এর মধ্যে ব্রেক পয়েন্ট ভাঙ্গা অংশ নির্ধারণ করার জন্যই মূলত এটাকে ব্যবহার করা হয়ে থাকে। ধরুন আপনি কোন একটা লেখা লিখছেন এবং সেই লেখার মধ্যে আপনি একটি লাইনের থেকে অন্য একটা লাইনে যেতে চাচ্ছে এবং মাঝখানে আপনি গ্যাপ রাখতে চাচ্ছেন বা ব্রেক দিতে চাচ্ছেন সেই ক্ষেত্রে আপনি এই ট্যাগটি ব্যবহার করতে পারেনা
<img/> ট্যাগ:
এই ট্যাগটি প্রাথমিকভাবে আপনার কাছে জটিল মনে হতে পারে কিন্তু এটি মোটেও জটিল নয় কয়েকবার প্রাক্টিস করলেই আপনি মনে রাখতে পারবেন ।
যে কোন ওয়েব পেজে ছবির গুরুত্ব অনেক বেশি। এর মাধ্যমে ইউজারকে খুব কম জিনিসের মধ্যে অনেক বেশি তথ্য দেওয়া হয় এবং ইউজারের আকর্ষণ বৃদ্ধির জন্য ছবির গুরুত্ব অনেক বেশি। ছবি দেখানোর জন্য মূলত ইমেজ ট্যাগকে ব্যবহার করা হয়ে থাকে। এর মধ্যে বেশকিছু জিনিস থাকে যেগুলোর মাধ্যমে একটি ছবিকে লোড করা হয়, ছবিটির নাম দেওয়া হয়, এবং ছবিটিকে মূলত বিভিন্ন রোবট এর জন্য বোধগম্য করা হয়।
src=”url” এর মধ্যে থাকে ছবির লোকেশন, alt=”text” এর মাধ্যমে ছবির বিষয়ে রোবট ও slow internet ব্যাবহার করা ইউজার কে ধারনা দেওয়া হয়। height=”” ও width=”” এর মাধ্যমে মূলত ছবির আকার ঠিক করা হয়।
<form></form> ট্যাগ:
এর মাধ্যমে মূলত আমরা ওয়েব পেজে বিভিন্ন ধরনের ফ্রম যুক্ত করতে পারি। যেখানে আমরা ইউজার থেকে বিভিন্ন ইনপুট নিতে পারি। এবং সেটাকে ইউজারের এর মাধ্যমে সেন্ড করতে পারি। কোন একটি নির্দিষ্ট স্থানে বা আমরা নিজেদের ওয়েব সার্ভারে সেটাকে সংযুক্ত করে নিতে পারি। সেই তথ্যগুলো স্টোর করে রাখার জন্য আমাদেরকে ব্যবহার করতে হয় বিভিন্ন ধরনের প্রোগ্রামিং ল্যাংগুয়েজের যেমন, পিএইচপি এবং জাভাস্ক্রিপ্ট।
<table></table> ট্যাগ:
টেবিল ওয়েবসাইটের জন্য অনেক গুরুত্বপূর্ণ একটি অবদান রাখে। কারণ টেবিল এর মাধ্যমে খুব সহজে আমরা অনেক বেশি পরিমাণে তথ্য একজন ইউজারকে দিতে পারি এর ফলে আমরা খুব সহজেই অল্প স্থানের মধ্যে এবং কম সময়ের মধ্যে ইউজারকে বেশি পরিমাণে তথ্য দিয়ে সাহায্য করতে পারি। একটি টেবিল তৈরি করার জন্য মূলত table tag কে ব্যবহার করা হয় এর মধ্যে আমরা আরো বেশ কিছু ট্যাগ ব্যাবহার করা হয়।
<caption></caption> দিয়ে মুলত আমরা একটি টেবিলের মূল বিষয়কে তুলে ধরতে পারি। অর্থাৎ টেবিলটা যেই বিষয় নিয়ে বানানো সেই বিষয় সম্পর্কে আমরা ধারণা দেয়ার জন্যই মূলত এই অংশটা ব্যবহার করে থাকি।
<tbody></tbody> এই অংশটি দিয়ে মূলত টেবিলের পুরো অংশকে নির্দেশ করা হয়ে থাকে অর্থাৎ পুরো টেবিল এর মধ্যে যা থাকে সেটাকে নির্দেশ করার জন্য এটাকে ব্যবহার করা হয়ে থাকে।
<th></th> দিয়ে মূলত টেবিলের মূল ডাটাকে দেখানো হয় এবং <tr></tr> দিয়ে টেবিল এর রো বা সারি কে নির্দেশ করা হয়। <td></td> দিয়ে টেবিল এর ডাটা নির্দেশ করা হয়।
<a href=””> ট্যাগ:
ইন্টারনেটের দুনিয়ায় সবথেকে গুরুত্বপূর্ণ ট্যাগ এটা। এটার মাধ্যমে মূলত পৃথিবীর প্রতিটা ওয়েবসাইট একে অন্যের সাথে কানেক্টেড হয়ে থাকে। একটা ওয়েবসাইট অন্য একটা ওয়েবসাইটের সাথে যুক্ত হতে এর গুরুত্ব অনেক। এটাকে কি বলা হয়ে থাকে লিংকটা অর্থাৎ এটার মাধ্যমে আমরা অন্য যে কোন ওয়েবসাইটকে একাউন্টের সাথে লিংক করতে পারব বা যেকোন ওয়েব পেজকে বাজে কালকে আমরা একে অন্যের সাথে লিঙ্ক করতে পারব।
নিচে আমরা আরও আনেকগুলো ট্যাগ নিয়ে কথা বলব:
<b></b> Text বা লেখাকে Bold করার জন্য ব্যবহৃত হয়
<i></i> Text বা লেখাকে Italic করার জন্য ব্যবহৃত হয়
<u></u> Text বা লেখাকে Underline করতে ব্যবহৃত হয়
<big></big> Text বা লেখাকে স্বাভাবিকের চেয়ে বড় করতে ব্যবহৃত হয়
<small></small> Text বা লেখাকে স্বাভাবিকের চেয়ে ছােট করতে ব্যবহৃত হয়
<sub></sub>সংখ্যার বেজ দেখাতে ব্যবহৃত হয়
<sup></sup>সংখ্যার পাওয়ার দেখাতে ব্যবহৃত হয়
<tt></tt> টেলিটাইপ টেক্সট নির্দেশ করেতে ব্যবহৃত হয়
<em></em> গুরুত্বপূর্ণ Text বা লেখাকে Emphasized করতে ব্যবহৃত হয়
<blink></blink> Text বা লেখাকে Blinking করতে ব্যবহৃত হয়
<blockquote></blockquote> বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়
<input></input> ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়
<li></li> লিস্ট তৈরিতে ব্যবহৃত হয়
<meta></meta> Meta তথ্য যুক্ত করতে ব্যাবহার করা হয়
0 মন্তব্যসমূহ