HTML এ Tag এর ধরন ও প্রকৃতি এবং এদের বিস্তারিত ব্যাখ্যা ! - জীবন গড়ি প্রযুক্তির সুরে ♫

Post Top Ad

HTML এ Tag এর ধরন ও প্রকৃতি এবং এদের বিস্তারিত ব্যাখ্যা !

HTML এ Tag এর ধরন ও প্রকৃতি এবং এদের বিস্তারিত ব্যাখ্যা !

Share This
পুর্বের অধ্যায়ে আমরা জেনেছি HTML কি এবং HTML কেন শিখবেন? আশা করি আপনারা এসম্পর্কে একটা পরিস্কার ধারনা পেয়েছেন। আমরা যারা অনলাইনে আছি তারা হয়ত HTML জানিনা কিন্তু HTML এর বিভিন্ন ডকুমেন্ট তো দেখেছি! আমরা একটু ভাল করে লক্ষ্য করলেই দেখতে পাব < - >.......</-> বা <-/> এই ধরনের কিছু চিহ্ন দেখেতে পাই। এগুলোর মধ্যে বিভিন্ন নির্দেশনা দেওয়া থাকে যেমন: <h1>........</h1> এই সকল চিহ্ন সম্বলিত নিদের্শনাকে এক কথায় Tag বলা হয়। Tag হল HTML ডকুমেন্ট এ সরাসরি  Embed করা কিছু নির্দেশনা যারা একটি টেক্সকে সাধারন ভাবে উপস্থাপন করার পরিবর্তে সেটাকে একটি নির্দিষ্ট ফরম্যাটে উপস্থাপন করতে ব্রাউজারকে নির্দেশ করা হয়। HTML ট্যাগ সাধারনতঃ শুরু হয় ‘< ’দিয়ে এবং শেষ হয়  ‘>’  দিয়ে। HTML এ বিভিন্ন নির্দেশনা সম্বলিত Tag পরিলক্ষিত হলেও এদের ধরন ও প্রকৃতিতে সরলীকরণ করে একে প্রকাশ করা যায়। তাই এদের ধরন ও বৈশিষ্ট্যের দিক হতে Tag দু’ধরনের যথা:



১.  ডাবল ট্যাগ (Double or Paired Tag)
২. সিঙ্গেল ট্যাগ (Single or Unpaired Tag)

ডাবল ট্যাগ (Double or Paired Tag)

একটি ট্যাগকে তখনই ডা্বল ট্যাগ বলা হয় যখন কোন টেক্সটকে একই নির্দেশনা সম্বলিত দুটি ট্যাগের মাঝখানে রাখা হয়। যেমন <h1> আমাদের দেশ </h1> । এখানে একই নিদের্শনা সম্বলিত দুটি ট্যাগ পরিলক্ষিত হচ্ছে কারন এর মাঝে h1  লেখা আছে। এখানে প্রথম <h1> কে ‍স্টার্টিং ট্যাগ  এবং শেষের </h1> কে  ক্লোজিং ট্যাগ বলে। এই ট্যাগ সর্বদা জোড়ায় জোড়ায় অবস্থান করে বলেই একে Double or Paired Tag বলে। উপরের Double or Paired Tag দারা ’আমাদের দেশ’ কথাটিকি বড় করে Heading আকারে ডিস্প্লে করতে ব্রাউজারকে নির্দেশ দেওয়া হচ্ছে। এ সম্পর্কে আমরা বিস্তারিত পরে জানব।

উদারহরণঃ
<p> আমাদের দেশটাকে কত ভাল বাসি, সবুজ ঘাসের বুকে শেফালীর হাসি</p>

সিঙ্গেল ট্যাগ (Single or Unpaired Tag)

Unpaired Tag এর কোন Companion tag থাকেনা। এই ধরনের ট্যাগকে সিঙ্গেল ট্যাগ(Singular Tag) বা Stand Alone Tags ও বলা হয়ে থাকে।

উদাহরণ:
<link/>  ,      <br/> ,     <hr/> ,                                             

এখানে উপরোল্লিখিত ট্যাগসমুহ এক একটি সিঙ্গেল ট্যাগ। এদের কোন Companion ট্যাগ নেই।

HTML Tag কোথায় এট্রিবিউট লিখতে বা ঘোষনা করতে হয়?

এবিষষটি আলোচনার আগে আমাদের এট্রিবিউট কি তা জানা আবশ্যক। এটি জানতে নিচের উদাহরণটি আগে ভাল করে লক্ষ করুন।

<link href="style.css" rel="stylesheet" type="text/css"/>

এখানে উপরের উদাহরণে ‘=’ চিহ্নের বামের অংশটুকুকে এট্রিবিউট(Attribute) এবংডান পাশে “   ” চিহ্ন র মাঝখানের  অংশটুকুকে প্যারামিটার (parameter) বলে।

এবার নিচের উদাহরণটি ভালভাবে লক্ষ্য করুন:
<span style="background-color: #f3f3f3;"> আমাদের দেশ </span> 

উপরের উদাহরণে প্রথমটি সিঙ্গেল ট্যাগ এবং দ্বিতীয়টি ডাবল ট্যাগ। একটু ভাল ভাবে লক্ষ্য করুন দেখুন সিংঙ্গেল ট্যাগ নেম এর ঠিক পরে একটি স্পেস দিয়ে এবং ডাবল ট্যাগ নেম এ প্রথম ট্যাগ নেম এর ঠিক পরে একটি স্পেস দিয়ে Attribute দেওয়া হয়েছে।

ব্যবহার ভেদে বিভিন্ন প্রকার ট্যাগসুমহ: 

HTML ট্যাগসমুহকে এর ব্যবহারের ভিত্তিতে আমরা শ্রেনীকরন করতে পারি। এদিক দিয়ে বিবেচনা করলে আমরা ট্যাগ সমুহকে তিন শ্রেনীকে ভাগ করতে পারি। যথা:

১. ফরম্যাটিং ট্যাগ(Formatting Tags):
যে সকল ট্যাগ ব্যবহার করে টেক্সট কে বিভিন্ন ফরম্যাট দেওয়া হয় যেমন কোন টেক্সটকে বোল্ড করা, ইটালিক করা, আন্ডারলাইন করা ইত্যাদি কাজ করা হয় তাদের ফরম্যাটিং ট্যাগ বলা হয়। যেমন: <font>, <u>,<b>  ইত্যাদি।
২. পেজ ‍স্ট্রাকচার (Page Structure Tags)ট্যাগ: 
Description , title , head , body ইত্যাদি ট্যাগ হল পেজ স্ট্রাকচার ট্যাগ যা দ্বারা একটি এইচটিএমএল পেজকে তার বিভিন্ন গঠন দেওয়া হয়।  এগুলো ব্যাসিক HTML  পেজ এর একটি অংশ যা কখনোই সরাসর কোন টেক্সট বা ইমেইজ কে প্রভাবিত করেনা। 
৩. কন্ট্রোল (Control Tags)ট্যাগ: 
Form tags, Script tags, Radio buttons হল এই Control Tags উদাহরণ। 


- কিছু প্রয়োজনীয় HTML ট্যাগ যা আপনাদের কাজে লাগবেই -

Tag Description DTD
<!–…–> মন্তব্য করার জন্য STF
<!DOCTYPE> HTML ডকুমেন্টের ধরণ নির্ধারণ করার জন্য STF
<a> লিংক দেওয়ার জন্য STF
<abbr> abbreviation দেওয়ার জন্য STF
<acronym> acronym দেওয়ার জন্য STF
<address> HTML ডকুমেন্টের লেখক/Author এর তথ্য দেওয়ার জন্য STF
<applet> applet এম্বেড করার জন্য TF
<area /> image-map এরিয়া করার জন্য STF
<b> লেখা বোল্ড করার জন্য STF
<base /> Specifies the base URL/target for all relative URLs in a document STF
<basefont /> ফন্ট সাইজ ও কালার নির্ধারণ করার জন্য TF
<bdo> Overrides the current text direction STF
<big> বড় লেখার জন্য STF
<blockquote> উক্তি/ quotation দেওয়ার জন্য STF
<body> বডি দেওয়ার জন্য STF
<br /> লাইন ব্রেক করার জন্য STF
<button> বাটন আনার জন্য STF
<caption> ক্যাপশন দেওয়ার জন্য STF
<center> লেখার মাঝখানে নেওয়ার জন্য TF
<cite> Defines a citation STF
<code> কোড শো করার জন্য STF
<col /> টেবিলের মধ্যে কলাম নেওয়ার জন্য STF
<colgroup> Specifies a group of one or more columns in a table for formatting STF
<dd> Defines a description of an item in a definition list STF
<del> কোন লেখা মোছার জন্য STF
<dfn> Defines a definition term STF
<dir> ডাইরেক্টরী লিস্ট আনার জন্য TF
<div> Defines a section in a document STF
<dl> Defines a definition list STF
<dt> Defines a term (an item) in a definition list STF
<em> Defines emphasized text STF
<fieldset> Groups related elements in a form STF
<font> লেখার আকার, রং নির্ধারণ এর জন্য TF
<form> ফর্ম আনার জন্য STF
<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<h1> to <h6> হোডিং আনার জন্য STF
<head> হেড আনার জন্য STF
<hr /> একটি লাইন আনার জন্য STF
<html> ডকুমেন্টটি কোন ধরনের তা শো করার জন্য STF
<i> লেখা ইটালিক করার জন্য STF
<iframe> আইফ্রেম আনার জন্য TF
<img /> ছবি আনার জন্য STF
<input /> ইনপুট ফর্ম আনার জন্য STF
<ins> Defines text that has been inserted into a document STF
<kbd> Defines keyboard input STF
<label> Defines a label for an <input> element STF
<legend> Defines a caption for a <fieldset> element STF
<li> Defines a list item STF
<link /> Defines the relationship between a document and an external resource STF
<map> Defines a client-side image-map STF
<menu> Deprecated. Defines a menu list TF
<meta /> Defines metadata about an HTML document STF
<noframes> Defines an alternate content for users that do not support frames TF
<noscript> Defines an alternate content for users that do not support client-side scripts STF
<object> Defines an embedded object STF
<ol> Defines an ordered list STF
<optgroup> Defines a group of related options in a drop-down list STF
<option> Defines an option in a drop-down list STF
<p> Defines a paragraph STF
<param /> Defines a parameter for an object STF
<pre> Defines preformatted text STF
<q> Defines a short quotation STF
<s> Deprecated. Defines strikethrough text TF
<samp> Defines sample output from a computer program STF
<script> Defines a client-side script STF
<select> Defines a drop-down list STF
<small> Defines smaller text STF
<span> Defines a section in a document STF
<strike> Deprecated. Defines strikethrough text TF
<strong> Defines strong text STF
<style> Defines style information for a document STF
<sub> Defines subscripted text STF
<sup> Defines superscripted text STF
<table> Defines a table STF
<tbody> Groups the body content in a table STF
<td> Defines a cell in a table STF
<textarea> Defines a multiline input control (text area) STF
<tfoot> Groups the footer content in a table STF
<th> Defines a header cell in a table STF
<thead> Groups the header content in a table STF
<title> Defines a title for the document STF
<tr> Defines a row in a table STF
<tt> Defines teletype text STF
<u> Deprecated. Defines underlined text TF
<ul> Defines an unordered list STF
<var> Defines a variable STF
<xmp> Deprecated. Defines preformatted text

No comments:

Post a Comment

Post Bottom Ad

Pages