সকল এইচটিএমএল ট্যাগ,শিখুন কোডিং উদাহরণসহ।

Image-2

HTML এ প্রোগ্রাম লেখার জন্য    এবং  দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body  ইত্যাদি  Keyword  ব্যবহার করা হয়।  বা চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন   এবং।  হল body শুরু ট্যাগ এবং হল body শেষ ট্যাগ।

নিচে সকল এইচটিএমএল ট্যাগ তালিকা দেয়া হল। প্রতিটি ট্যাগের উদাহরন সহঃ

HTML এর সাধারন ট্যাগ সমূহ:

ট্যাগ 

সংক্ষিপ্ত বর্ননা

HTML ডকুমেন্ট নির্দেশ করে।

প্রোগ্রামের head  অংশ নির্দেশ করে।

ডকুমেন্ট টাইটেল নির্দেশ করে।

প্রোগ্রামের মূল content অংশ নির্দেশ করে।

Anchor ট্যাগ।

Abbreviation ট্যাগ।

Bold টেক্সট নির্দেশ করে।

Italic টেক্সট নির্দেশ করে।

স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে।

স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে।

বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।

একটা লাইন ব্রেক তৈরি করে।

কম্পিউটার কোড টেক্সট প্রকাশ করে।

টেবিল তৈরিতে ব্যবহৃত হয়।

টেবিলের কলাম তৈরিতে ব্যবহৃত হয়।

টেবিলের সেল তৈরিতে ব্যবহৃত হয়।

টেবিলের সারি তৈরিতে ব্যবহৃত হয়।

ফরম তৈরিতে ব্যবহৃত হয়।

হেডার ট্যাগ 1-6 পর্যন্ত হয়।


সমান্তরাল রেখা তৈরি করে।

ছবি যুক্ত করতে ব্যবহৃত হয়।

ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়।

লিষ্ট তৈরিতে ব্যবহৃত হয়।

Meta ট্যাগ

অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।

আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।

প্যারাগ্রাফ নির্দেশ করে

pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়।

টেলিটাইপ টেক্সট নির্দেশ করে।

Strong টেক্সট নির্দেশ করে।

subscripted text নির্দেশ করে।

superscripted text নির্দেশ করে।

উদাহরন:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

The hr tag defines a horizontal rule:




This is a paragraph.




This is a paragraph.




This is a paragraph.


উদাহরন:

1

2

3

4

5

6

7

8

<a href="http://www.w3schools.com">This is a link

 

এইচটি এম এল এর সাধারণ ট্যাগ সমূহ[সম্পাদনা]

ট্যাগের নামবর্ণনা
<html> </html>(HTML) ডকুমেন্ট নির্ধেশ করে
<head> </head>(HEAD) প্রোগ্রামে প্রধান অংশ নির্ধেশ করে
<title> </title>(TITLE) ডকুমেন্ট শিরোনাম নির্ধেশ করে
<body> </body>(BODY) প্রোগ্রাম মূল অভ্যন্তরস্থ অংশ নির্ধেশ করে
<a> </a>(ANCHOR) নির্ধেশ করে
<abbr> </abbr>(ABBREVIATION) সংক্ষিপ্তরূপ নির্ধেশ করে
<b> </b>(BOLD) গাড় লেখা নির্ধেশ করে
<i> <i>(ITALIC) বাঁকা লেখা নির্ধেশ করে
<big> </big>(BIG) স্বাভাভিকের চেয়ে বড় লেখা নির্ধেশ করে
<small> </small>(SMALL) স্বাভাভিকের চেয়ে ছোট লেখা নির্ধেশ করে
<blockquote> </blockquote>(BLOCKQUOTE) বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়
<br />একটা লাইন ব্রেক তৈরি করে
<code> </code>(CODE) প্রোগ্রামের কোড লেখা প্রকাশ করে
<table> </table>(TABLE) টেবিল তৈরি করতে
<col> </col>টেবিলে কলাম তৈরি করতে ব্যবহৃত হয়
<td> </td>টেবিলে সেল তৈরি করতে ব্যবহৃত হয়
<tr> </tr>টেবিলে সারি তৈরি করতে ব্যবহৃত হয়
<form> </form>(FORM) ফর্ম তৈরি করতে ব্যবহৃত হয়
<h1> </h1>(HEADER) শিরোনাম লিখতে ব্যবহৃত হয়। হেডার ট্যাগ 1-6 পর্যন্ত হ্য়
<hr/>সমান্তরাল রেখা তৈরি করে
<img/>(IMAGE) চিত্র যুক্ত করতে ব্যবহৃত হয়
<input> </input>(INPUT) ফর্ম ফিল্ডে তৈরি করতে ব্যবহৃত হয়
<li> </li>(LIST) তালিকা তৈরি করতে ব্যবহৃত হয়।
<ol> </ol>(ORDER LIST) অর্ডার তালিকা তৈরি করতে ব্যবহৃত হয়
<ul> </ul>(UNORDER LIST) আনঅর্ডার তালিকা তৈরি করতে ব্যবহৃত হয়
<p> </p>(PARAGRAP)
<pre> </pre>(PRE-FORMATTED) পূর্ব ফর্মেটকৃত লেখা নির্ধেশ করে
<tt> </tt>(TELETYPE) টেলিটাইপ লেখা নির্ধেশ করে
<strong> </strong>(STRONG) স্ট্রঙ লেখা নির্ধেশ করে
<sub> </sub>(SUBSRICPTED) উপঃলিপি লেখা নির্ধেশ করে
<sup> </sup>(SUPERSRICPTED) সুপারস্ক্রিপ্ট লেখা নির্ধেশ করে
<meta> </meta>(META) মেটা ট্যাগ

যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ, ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।

ট্যাগ উদারন[সম্পাদনা]

ট্যাগ এর প্রধান তিনটি অংশ আছে

ক. শুরু করার ট্যাগ(opening tag)

খ.ধারনকৃত অংশ(contents)

গ.শেষ করার ট্যাগ (closing tag)।

এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।

<p>A Paragraph Tag</p>

ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো ট্যাগ দেখানো হলো।

<body> Body Tag (acts as a content shell)
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>

Closing ট্যাগ ছাড়া ট্যাগ:

কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না।সে ট্যাগ টি হচ্ছে line break tag এবং তা
রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।

আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।

<img src="/../mypic.jpg" /> -- Image Tag
<br /> -- Line Break Tag
<input type="text" size="12" /> -- Input Field

ট্যাগ সমূহ বর্ণনা <html> </html> HTML ডকুমেন্ট নির্দেশ করে। <head></head> প্রোগ্রামের head অংশ নির্দেশ করে। <title></title> ডকুমেন্ট টাইটেল নির্দেশ করে। <body></body> প্রোগ্রামের মূল content অংশ নির্দেশ করে। <a></a> Anchor ট্যাগ। Abbreviation ট্যাগ। Bold টেক্সট নির্দেশ করে। Italic টেক্সট নির্দেশ করে। স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে। স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে।

বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।
একটা লাইন ব্রেক তৈরি করে। কম্পিউটার কোড টেক্সট প্রকাশ করে।

টেবিল তৈরিতে ব্যবহৃত হয়।

<col></col> টেবিলের কলাম তৈরিতে ব্যবহৃত হয়।

টেবিলের সেল তৈরিতে ব্যবহৃত হয়। টেবিলের সারি তৈরিতে ব্যবহৃত হয়। <form></form> ফরম তৈরিতে ব্যবহৃত হয়।

হেডার ট্যাগ 1-6 পর্যন্ত হয়।


সমান্তরাল রেখা তৈরি করে।

<img/> ছবি যুক্ত করতে ব্যবহৃত হয়। <input></input> ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়।

  • লিষ্ট তৈরিতে ব্যবহৃত হয়।

<meta></meta> Meta ট্যাগ

অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়। আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়। প্যারাগ্রাফ নির্দেশ করে pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়।

টেলিটাইপ টেক্সট নির্দেশ করে। Strong টেক্সট নির্দেশ করে। subscripted text নির্দেশ করে। superscripted text নির্দেশ করে। Underline বা লিখার নিচে লাইন নির্দেশ করে। মাঝে মাঝে আমরা অনেক ওয়েব সাইটে দেখি যে কোন একটি ওয়ার্ড বা বাক্যে বার্টিক্যালি মাঝ বড়াবর দাগ টানা থাকে। সাধারনত পন্যদ্রব্য এর কেনা বেচার সাইটে কোন পুরাতন লিখাকে/দাম কেটে নতুন লিখাকে/দাম অন্তর্ভক্ত করতেই এই ট্রাগের ব্যবহার।কিভাবে লিখতে হয় দেখুন- একটি ওয়ার্ড Delete বা একটি বাক্য This is Delete tag exampleনির্দেশ করে। Delete ট্যাগ এর ঠিক উল্টো। পুরাতন লিখাকে কেটে নতুন লিখাকে অন্তুর্ভূক্ত করদেই এই ট্যাগ এর ব্যবহার। Insert ট্যাগটি নরমাল লিখার মতই। তাই ডিলিট ট্যাগ এর সাথে এটি না লিখলে বুঝতে পারা যায় না।

ব্লককোট ট্যাগ(): ব্লককোট ট্যাগ যে প্যারা বা লাইনে ব্যবহার করা হবে। শুধু সেই লিখাটুকু বামে কিছুদূর মার্জিন নিয়ে স্বতন্ত্রভাবে প্রদর্শন করবে অন্যসব প্যারা থেকে। নিচের উদাহরণটি অনুসরন করুন-

This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class.

This is web design tutorial. This is web design tutorial. This is web design tutorial.

This is web design tutorial. This is web design tutorial. This is web design tutorial. This is web design tutorial. This is web design tutorial. This is web design tutorial.

হরিজোনটাল লাইন ট্যাগ (


): HTML এর কিছু ট্যাগ রয়েছে যেগুলো স্টার্টিং ট্যাগ দিয়েই শেষ হয়। এগুলো কোন ইলিমেন্ট বহন করে না বিধায় এগুলো এমন। তার মধ্যে অন্যতম হরিজোনটাল লাইন ট্যাগ। এর কাজ শুধু মাত্র যেখানে এটি ব্যবহার করা হবে সেখানে একটি হরিজোনটাল লাইন প্রদর্শণ করবে। ব্যবহার করে দেখুন এভাবে:

This is web design tutorial. Showing Horizontal Line below.

This is web design tutorial. Showing Horizontal Line below above.

কোটেশন ট্যাগ (): এক বা একধিক বর্ণ, শব্দ, বাক্য বা প্যারার শুরুতে এবং শেষে “” চিহৃ কে আমরা কোটেশন বলি। তাই নতুন করে আর পরিচয় করিয়ে দিতে গেলাম না। শুধু নোটপ্যাডে প্রাকটিস করুন এই লাইনটি তাহলেই বুঝবেন-
This is quotation tag.

লাইন ব্রেক ট্যাগ (br/): এক বা একধিক বর্ণ, শব্দ, বাক্য বা প্যারার মধ্যে লাইন ব্রেক করতে এই ট্যাগের ব্যবহার। মানে একটি প্যারা লিখার পর এই ট্যাগ ইউজ করলে নতুন লাইন বা প্যারা শুরু হবে। হুবহু কি-বোর্ডের এন্টার প্রেস করারমত। এটিও হরিজোনটাল লাইন ট্যাগ এর মত কোন উপাদান বহন করে না। অবশ্য বলে রাখা ভাল, প্যারাগ্রাফ ট্যাগ নিজেই লাইন ব্রেকের কাজ করে।

এব্রিভিয়েশন ট্যাগ ( ): এই ট্যাগের কাজঃ সাপোজ আপনি কোন ওয়েব সাইটের কোন টেক্ট/বা লাইনকে সংক্ষিপ্ত করে কয়েকটি লেটার/অ্কষর দিয়ে দেখাতে চাচ্ছেন। মানে আপনার পুরো লিখাটি যদি World Wide Web হয়। তাহলে সংক্ষিপ্ত করলে তা হবে WWW। কিন্তু আপনি চাইছেন কেউ এই WWW এর উপরে মাউস কার্সার রাখলে  পুরো লিখাটি (World Wide Web) প্রদর্শণ করবে। এই কাজটি করার জন্যই এব্রিভিয়েশন ট্যাগ ব্যবহার করা হয়। নোটপ্যাডে প্রাকটিস করুন এই লাইনটি তাহলেই বুঝবেন-
WWW
টেক্সট ডিরেকশন ট্যাগ ():  এই ট্যাগটি আপনার লিখার ডিরেকশন পরিবর্তন করবে। ধরুন আপনি চাইছেন আপনার মূল লিখাটি “This is opposite Direction Tag” আপনি এই লাইটিকে gaT noitceriD etisoppo si sihT এভাবে লিখতে তাহলে আপনাকে নিচের ট্যাগটি লিখতে হবে-
This is opposite Direction Tag
 এবং  হলো মূল ট্যাগ কিন্তু আপনার টেক্টসকে উল্টা ডিরেকশনে দেখাতে হলে dir=’”” এ rtl রিখতে হবে। কারন ইংরেজি বণর্মালাতে ক্রমান্বয়ে সর্বশেষে r, তার আগে t এবং তার আগে l আসে। বুঝাতে পেরেছি কি? না পারলে টিউমেন্টে জানান।
বিগ ট্যাগ ():  সাধারন বা যেকোন সাইজের ফন্টকে অপেক্ষাকৃতি বড় দেখানোর জন্য এই ট্যাগ ব্যবহার হয়। নিচের মত করে...
This is big tag.
কোড ট্যাগ ():  যারা প্রোগ্রামিং করেন তাদের প্রোগ্রামিং এরিয়াতে দেখবেন লিখার স্টাইলগুলো। যে ফন্টেই লিখেন না কেন স্টাইলটা হবে কোন লিখার মত। অনেকটা জায়গা আলাদা করে নিয়ে প্রদর্শন করবে এই কোডের ভেতরে কিছু লিখলো। নিচের মত করে...

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করুন।

ভালো লাগলে SHARE কোরবেন।

Level 0

আমি Chayan Molla। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 6 বছর 9 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 9 টি টিউন ও 5 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 7 ফলোয়ার আছে এবং আমি টেকটিউনসে 33 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস