Welcome to Creationbangla-24 . কেমন আছেন বন্ধুরা? আপনারা অবশ্যই Title দেখে বুঝতে পেরেছেন এই পেজে কী বিষয় নিয়ে আলোচনা করতে যাচ্ছি। তো আপনাদের জানিয়ে রাখি এটি একটি শিক্ষা বিষয়ক সাইট। এই site এ আমি নির্দিষ্ট কিছু বিষয় নিয়ে ধারাবাহিক ভাবে লিখব। আপনাদের একটি কথা না বললেই নয় যে, এই Page টি ভালোভাবে বুঝার জন্য এবং Page টি থেকে উপকৃত হওয়ার জন্য সম্পূর্ণ Page টি মনযোগ সহকারে পড়বেন। এখন এই পেজটিতে আপনাদের সাথে আলোচনা করতে যাচ্ছি "HTML Tag" সম্পর্কে এবং আপনাদের সাথে আছি আমি Md.Aiub তো চলুন বন্ধুরা শুরু করা যাক।
HTML keyword: HTML ভাষায় প্রোগ্রাম লেখার জন্য যেসব বিশেষ বিশেষ বর্ণ বা শব্দগুলো ব্যবহার করা হয় তাকে HTML keyword বলে।
HTML Tag: HTML ভাষায় প্রোগ্রাম লেখার জন্য HTML keyword গুলো যখন Double Angel Bracket < > দ্বারা আবদ্ধ করা হয় তখন তাকে HTML Tag বলে।
আর HTML ভাষায় প্রোগ্রাম লিখার সময় HTML keyword গুলো সরাসরি ব্যবহার করা যাবে না। অবশ্যই এগুলো ট্যাগ আকারে ব্যবহার করতে হবে।
HTML Tag প্রধান তিনটি অংশ আছে
১. শুরু করার ট্যাগ(Opening Tag)
২.ধারনকৃত অংশ(Contents/Element)
৩.শেষ করার ট্যাগ (Closing Tag)
১. শুরু করার ট্যাগ(Opening Tag): যে ট্যাগ দ্বারা HTML ভাষায় তৈরিকৃত ওয়েবপেজের কোনো লাইন বা অংশ অথবা অন্য কোনো বৈশিষ্ট্য শুরু করা হয় তাকে Opening Tag বলে। একটি HTML keyword কে Double Angel Bracket এর মাঝে আবদ্ধ করে এ ধরনের ট্যাগ তৈরি করা হয়। যেমন: <html>
২.ধারনকৃত অংশ/উপাদান (Contents/Element): HTML ভাষায় তৈরিকৃত ওয়েবপেজে আপনি ব্যবহারকারীদের নিকট যা প্রদর্শন করাতে চান তাকে Element বলে। যেমন: <p> Content </p>
৩.শেষ করার ট্যাগ (Closing Tag): যে ট্যাগ দ্বারা HTML ভাষায় তৈরিকৃত ওয়েবপেজের কোনো লাইন বা অংশ অথবা অন্য কোনো বৈশিষ্ট্য শেষ করা হয় তাকে Closing Tag বলে। Double Angel Bracket এর মাঝে প্রথমে একটি / ও পরে একটি HTML keyword কে একত্রে আবদ্ধ করে এ ধরনের ট্যাগ তৈরি করা হয়। যেমন: </html>
HTML Tag এর প্রকারভেদ
বৈশিষ্ট্য অনুযায়ী Tag দুই প্রকার যথা:
1.Container Tag
2.Empty Tag
1.Container Tag: যে সমস্ত ট্যাগ এর Opening Tag ও Closing Tag এবং Content/Element আছে তাকে Container Tag বলে । যেমন: <p> I love my country </p>
2.Empty Tag: যে সমস্ত ট্যাগ এর শুধু Opening Tag থাকে কিন্তু Closing Tag ও Content/Element থাকে না তাকে Empty Tag বলে । যেমন: <br> একটি Line break করার জন্য এই ট্যাগ ব্যবহার করা হয়।
HTML Syntax: HTML ভাষায় প্রোগ্রাম লেখার সময় যেসব নিয়ম-কানুন ও বিধি- নিষধ মেনে চলতে হয় সেই সমস্ত নিয়ম-নীতির সমষ্টিকে HTML Syntax (গঠন রীতি) বলে।
Container Tag এর গঠনরীতি: সমস্ত Container Tag এর গঠনরীতি নিম্নরূপ:
<opening tag> content... <closing tag> অর্থাৎ Opening Tag এর মাধ্যমে শুরু করা হয়। তারপর প্রয়োজন অনুযায়ী কন্টেন্ট লিখতে হয়। তারপর Closing Tag এর মাধ্যমে বন্ধ করতে হয়। যেমন: <p>Bangladesh is a small country </p>
Empty Tag এর গঠনরীতি: যেহেতু Empty Tag এর কোন কনটেন্ট নেই তাই এই ধরনের সরাসরি ব্যবহার করা যায়। যেমন: <br> আর আপনি যদি আপনার Document এর কঠোর বৈধতা চান বা HTML Parser পঠনযোগ্য করতে চান তাহলে অবশ্যই প্রত্যেকটি ট্যাগ সঠিকভাবে বন্ধ করতে হবে। তাহলে Empty Tag গুলো বন্ধ করতে হলে Double Angel Bracket এর মাঝে প্রথমে একটি HTML keyword ও পরে একটি / চিহ্নকে একত্রে আবদ্ধ করে এ ধরনের ট্যাগ তৈরি করতে হবে। যেমন: <br/>
বৈশিষ্ট্য অনুযায়ী Tag দুই প্রকার যথা:
1.Container Tag
2.Empty Tag
1.Container Tag: যে সমস্ত ট্যাগ এর Opening Tag ও Closing Tag এবং Content/Element আছে তাকে Container Tag বলে । যেমন: <p> I love my country </p>
2.Empty Tag: যে সমস্ত ট্যাগ এর শুধু Opening Tag থাকে কিন্তু Closing Tag ও Content/Element থাকে না তাকে Empty Tag বলে । যেমন: <br> একটি Line break করার জন্য এই ট্যাগ ব্যবহার করা হয়।
HTML Syntax: HTML ভাষায় প্রোগ্রাম লেখার সময় যেসব নিয়ম-কানুন ও বিধি- নিষধ মেনে চলতে হয় সেই সমস্ত নিয়ম-নীতির সমষ্টিকে HTML Syntax (গঠন রীতি) বলে।
Container Tag এর গঠনরীতি: সমস্ত Container Tag এর গঠনরীতি নিম্নরূপ:
<opening tag> content... <closing tag> অর্থাৎ Opening Tag এর মাধ্যমে শুরু করা হয়। তারপর প্রয়োজন অনুযায়ী কন্টেন্ট লিখতে হয়। তারপর Closing Tag এর মাধ্যমে বন্ধ করতে হয়। যেমন: <p>Bangladesh is a small country </p>
Empty Tag এর গঠনরীতি: যেহেতু Empty Tag এর কোন কনটেন্ট নেই তাই এই ধরনের সরাসরি ব্যবহার করা যায়। যেমন: <br> আর আপনি যদি আপনার Document এর কঠোর বৈধতা চান বা HTML Parser পঠনযোগ্য করতে চান তাহলে অবশ্যই প্রত্যেকটি ট্যাগ সঠিকভাবে বন্ধ করতে হবে। তাহলে Empty Tag গুলো বন্ধ করতে হলে Double Angel Bracket এর মাঝে প্রথমে একটি HTML keyword ও পরে একটি / চিহ্নকে একত্রে আবদ্ধ করে এ ধরনের ট্যাগ তৈরি করতে হবে। যেমন: <br/>
নিম্নে Container Tag এর একটি তালিকা দেওয়া হলো।
<!--...--> ট্যাগ দ্বারা Comment এবং <!DOCTYPE> ট্যাগ দ্বারা Document এর ধরন নির্দেশ করে। উপরিউক্ত ট্যাগ গুলো ছাড়াও আরো কিছু ট্যাগ রয়েছে।
| Tag Name | Description | Practice |
|---|---|---|
| <a> | একটি হাইপারলিংক তৈরী করতে এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <abbr> | এই ট্যাগ দ্বারা একটি শব্দ গুচ্ছের সংক্ষিপ্তরূপ বুঝায়। | Try it |
| <address> | Document এর লেখক বা স্বত্বাধিকারীর Address নির্দেশ করে। | Try it |
| <article> | ওয়েবপেজে একটি Article নির্দেশ করে। | Try it |
| <aside> | ওয়েবপেজের কন্টেন্ট থেকে পৃথক অন্য একটি কন্টেন্ট নির্দেশ করে। | Try it |
| <audio> | ওয়েব পেজে Audio content নির্দেশ করে। | Try it |
| <b> | Text কে Bold করার জন্য ব্যবহার করা হয়। | Try it |
| <bdi> | কোনো Text কে অন্য কোনো Text থেকে বিচ্ছিন্ন করার জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <bdo> | বর্তমান Text direction কে override করার জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <big> | স্বাভাবিকের চেয়ে বড় Text নির্দেশ করে। | Try it |
| <blockquote> | অন্য Section থেকে ব্লককোডের সেকশনকে আলাদা করে। | Try it |
| <body> | Document এর body নির্দেশ করে। | Try it |
| <button> | Clickable button তৈরি করতে ব্যবহার করা হয়। | Try it |
| <canvas> | Script ব্যবহার করে গ্রাফিক্স অঙ্কন করতে ব্যবহার করা হয়। | Try it |
| <caption> | Table এর শিরোনাম নির্দেশ করে। | Try it |
| <center> | Text কে ওয়েবপেজের মাঝবরাবর প্রদর্শনের জন্য ব্যবহার করা হয়। | Try it |
| <cite> | কোনো কাজের শিরোনাম নির্দেশ করে। | Try it |
| <code> | Textকে Computer code এর মতো Style করার জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <colgroup> | টেবিলের এক বা একাধিক কলাম সাজানোর জন্য ব্যবহার করা হয়। | Try it |
| <data> | কোনো মেশিন-পঠনযোগ্য অনুবাদের সাথে নিজস্ব কন্টেন্টকে লিংক করে। | Try it |
| <datalist> | Input Element এর জন্য পূর্বনির্ধারিত Option এর একটি list নির্দেশ করে। | Try it |
| <dd> | বর্ণনামূলক লিস্টের ব্যাখ্যা করার জন্য ব্যবহার করা হয়। | Try it |
| <del> | Document থেকে Delete হয়েছে এমন style Text প্রদর্শন করে। | Try it |
| <details> | কোনো বিষয়ে অতিরিক্ত তথ্য ধারন করে। যা show/hide করা যা। | Try it |
| <dfn> | কোনো Document এর বিশেষ কোনো শব্দকে চিহ্নিত করা হয়। | Try it |
| <dialog> | একটি Dialog box নির্দেশ করে। | Try it |
| <div> | Document এর মাঝে একটি Division তৈরি করে | Try it |
| <dl> | List item এর বর্ণনা করার জন্য ব্যবহার করা হয়। | Try it |
| <dt> | বর্ণনামূলক লিস্টের নাম বা শর্ত নির্ধারণ করার জন্য ব্যবহার করা হয়। | Try it |
| <em> | Emphasized টেক্সট তৈরি করতে ব্যবহার করা হয়। | Try it |
| <fieldset> | এটি এলিমেন্টের চারদিকে একটি বক্স তৈরি করে। | Try it |
| <figcaption> | <figure> এলিমেন্টের শিরোনামকে বুঝানোর জন্য ব্যবহার করা হয়। | Try it |
| <figure> | স্বয়ংসম্পূর্ন কন্টেন্ট যেমন কোন কিছুর ব্যাখ্যা , ডায়াগ্রাম, ছবি, কোডের লিস্ট ইত্যাদি নির্দেশ করে। | Try it |
| <footer> | একটি Document অথবা সেকশনের Footer নির্দেশ করে। | Try it |
| <form> | Document এর মাঝে ফরম তৈরি করতে ব্যবহার করা হয়। | Try it |
| <h1> to <h6> | কোনো কিছুর শিরোনাম লিখার জন্য ব্যবহার করা হয়। | Try it |
| <head> | ًওয়েবপেজ সম্পর্কিত তথ্য ধারণ করে। | Try it |
| <header> | একটি Document বা Section এর শিরোনাম লিখার জন্য ব্যবহার করা হয়। | Try it |
| <html> | একটি HTML ডকুমেন্টের Root নির্দেশ করে। | Try it |
| <i> | Voice অথবা Mood এর পরিবর্তিত টেক্সটের একটি অংশ নির্ধারণ করে। | Try it |
| <iframe> | একটি ইনলাইন ফ্রেম এর জন্য ব্যবহার করা হয়। | Try it |
| <ins> | ডকুমেন্টে নতুন টেক্সট যুক্ত করতে ব্যবহার করা হয়। | Try it |
| <kbd> | কী-বোর্ড ইনপুট এর জন্য ব্যবহার করা হয়। | Try it |
| <label> | এলিমেন্ট এর লেভেলকে নির্দেশ করার জন্য ব্যবহার করা হয়। | Try it |
| <legend> | <fieldset> এলিমেন্টের ক্যাপশন নির্দেশ করতে ব্যবহার করা হয় | Try it |
| <li> | List এর item নির্দেশ করে। | Try it |
| <main> | একটি ডকুমেন্টের মূল বিষয়বস্তু উল্লেখ করে। | Try it |
| <map> | ক্লাইন্ট-সাইডের ইমেজ-ম্যাপ এর জন্য ব্যবহার করা হয়। | Try it |
| <mark> | মার্ক বা হাইলাইট করার জন্য ব্যবহার করা হয়। | Try it |
| <meter> | কোন কিছুর পরিমাপ বুঝানোর জন্য, এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <nav> | নেভিগেশন লিংক এর জন্য ব্যবহার করা হয় | Try it |
| <noscript> | যে সকল ব্রাউজারে স্ক্রিপ্ট সক্রিয় নয়, সেসকল ব্রাউজারে এই ট্যাগ বিকল্প কন্টেন্ট হিসাবে কাজ করে। | Try it |
| <object> | ডকুমেন্টের মধ্যে একটি embed অবজেক্ট নির্ধারন করে। | Try it |
| <ol> | Ordered list ًতৈরি করার জন্য ব্যবহার করা হয়। | Try it |
| <optgroup> | Group সম্পর্কিত Option গুলো Dropdown menu. আকারে দেখানোর জন্য ব্যবহার করা হয়। | Try it |
| <option> | একটি ড্রপ-ডাউন লিস্টের এক বা একাধিক অপশন এর জন্য ব্যবহার করা হয়। | Try it |
| <output> | Output দেখাতে ব্যবহার করা হয়। | Try it |
| <p> | Paragraph লেখার জন্য ব্যবহার করা হয়। | Try it |
| <picture> | একাধিক image এর জন্য একটি Container নির্ধারণ করে। | Try it |
| <pre> | আগে থেকেই format করা text এর জন্য ব্যবহার করা হয়। | Try it |
| <progress> | কোনো কাজের প্রোগ্রেস বা সফলতা অথবা অগ্রগতিকে বুঝায়। | Try it |
| <q> | একটি সংক্ষিপ্ত উদ্ধৃতি বোঝায়। | Try it |
| <rp> | যেসকল ব্রাউজারে Ruby টীকা সাপোর্ট করে না সেখানে কি দেখাতে হবে তার নির্দেশনা দেয়। | Try it |
| <rt> | পূর্ব এশিয়ান অক্ষর গুলোর ব্যখ্যা করার জন্য ব্যবহার করা হয়। | Try it |
| <rudy> | Ruby টীকা(পূর্ব এশিয়ার টাইপোগ্রাফীর) এর জন্য ব্যবহার করা হয়। | Try it |
| <samp> | কম্পিউটার প্রোগ্রাম থেকে সাধারন আউটপুট এর জন্য ব্যবহৃত হয়। | Try it |
| <script> | ক্লাইন্ট-সাইড স্ক্রিপ্ট (JavaScript) উল্লেখ করতে ব্যবহৃত হয়। | Try it |
| <section> | Document এর একটি Section নির্দেশ করে। | Try it |
| <select> | সাধারনত ড্রপ-ডাউন লিস্টের জন্য ব্যবহৃত হয়। | Try it |
| <small> | স্বাভাবিকের চেয়ে ছোট text নির্দেশ করে। | Try it |
| <span> | Document এর নির্দিষ্ট অংশে আলাদা Style করার জন্য ব্যবহার করা হয়। | Try it |
| <strong> | গুরুত্বপূর্ণ text নির্দেশ করে। | Try it |
| <style> | Document style করার জন্য ব্যবহার করা হয়। | Try it |
| <sub> | Subscript text এর জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <summary> | Details element কে সংক্ষিপ্ত আকারে দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <sup> | Superscript text এর জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <svg> | SVG গ্রাফিক্সের জন্য একটি container নির্ধারণ করে। | Try it |
| <table> | একটি টেবিল তৈরি করতে ব্যবহার করা হয়। | Try it |
| <tbody> | টেবিলের body content গুলোকে group করার জন্য ব্যবহার করা হয়। | Try it |
| <td> | এই ট্যাগ দ্বারা টেবিল ডাটাকে বুঝায়। | Try it |
| <template> | একটি টেমপ্লেট নির্ধারণ করে। | Try it |
| <textarea> | একটি Multiline input control নির্দেশ করে। | Try it |
| <tfoot> | টেবিল এর group ফুটারে কন্টেন্ট যোগ করার জন্য ব্যবহার করা হয়। | Try it |
| <th> | টেবিলের শিরোনাম লিখার জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <thead> | টেবিল এর group হেডার কন্টেন্ট যোগ করে। | Try it |
| <time> | Time/Date প্রদর্শন বা নির্ধারণ করে। | Try it |
| <title> | কোন একটি ডকুমেন্টের নাম দেয়ার জন্য ব্যবহার করা হয়। | Try it |
| <tr> | টেবিলের Row বা সারি তৈরির জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <tt> | Teletype এর টেক্সট নির্ধারণ করে। | Try it |
| <u> | একটি সাধারন Text এর নিচে Underline দেওয়ার জন্য ব্যাবহার করা হয়। | Try it |
| <ul> | আনঅর্ডার বা বুলেট লিস্টের জন্য ব্যবহার করা হয়। | Try it |
| <var> | কোন ভেরিয়েবল নির্ধারণ করা হয়। | Try it |
| <video> | কোন ভিডিও নির্ধারণ করা হয়। | Try it |
<!--...--> ট্যাগ দ্বারা Comment এবং <!DOCTYPE> ট্যাগ দ্বারা Document এর ধরন নির্দেশ করে। উপরিউক্ত ট্যাগ গুলো ছাড়াও আরো কিছু ট্যাগ রয়েছে।
নিম্নে Empty Tag এর একটি তালিকা দেওয়া হলো
| Tag Name | Description | Practice |
|---|---|---|
| <area> | Image-Map এর অভ্যন্তরে একটি অংশ নির্দেশ করে। | Try it |
| <base> | ওয়েবপেজে ব্যবহৃত সকল link এর URL's এবং টার্গেট নির্ধারণ করে। | Try it |
| <br> | এই ট্যাগ একটি লাইন ব্রেক নির্দেশ করে। | Try it |
| <col> | একটি <colgroup> Element এর প্রতিটি কলামের জন্য column property হিসাবে ব্যবহার করা হয়। | Try it |
| <embed> | ওয়েবপেজে একটি Non-HTML application নির্দেশ করে। | Try it |
| <hr> | কোনো কন্টেন্টে এর পর একটি Horizontal রেখা টানার জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <img> | ওয়েবপেজে ছবি অন্তর্ভক্ত করার জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <input> | ব্যবহারকারীর নিকট থেকে তথ্য input নেওয়ার জন্য একটি input filed নির্দেশ করে। | Try it |
| <link> | Document এবং অন্য কোনো External resource এর সাথে সম্পর্ক বুঝায়। | Try it |
| <meta> | Document এর মেটাডাটার জন্য এই ট্যাগ ব্যবহার করা হয়। | Try it |
| <param> | এই ট্যাগ দ্বারা কোনো অবজেক্টের জন্য একটি প্যারামিটার নির্দেশ করে। | Try it |
| <source> | Media Element জন্য একাধিক Media resource করার জন্য ব্যবহার করা হয়। (<video> and <audio>) | Try it |
| <track> | এই ট্যাগ Media Element এর জন্য একটি track নির্দেশ করে। | Try it |
| <wbr> | উপযুক্ত স্থানে লাইন ব্রেক করতে এই ট্যাগ ব্যবহার করা হয়। | Try it |
ًপ্রিয় পাঠক বন্ধুরা,
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে HTML Attribute নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে HTML Attribute নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...
Post a Comment