• আমাদের সম্পর্কে
  • গোপনীয় নীতি
  • বিজ্ঞাপন
  • যোগাযোগ করুন
  • শর্তাবলী
  • জাগোরিকে লিখুন
শুক্রবার, ডিসেম্বর ৮, ২০২৩
  • Login
Jagorik
  • এসএসসি
  • এইচএসসি
  • অনার্স
  • মাস্টার্স
  • স্কিল
    • এসইও
    • ওয়েব ডিজাইন
    • কোডিং শিখুন
    • গেস্ট ব্লগিং
    • অনলাইনে ইনকাম
    • ফ্রিল্যান্সিং শিখুন
  • বিদেশে পড়াশোনা
    • স্কলারশিপ
    • আমেরিকা
    • ফিনল্যান্ড উচ্চ শিক্ষা
    • ভারত
  • স্বাস্থ্যবার্তা
    • ঔষধের নাম
    • স্বাস্থ্য
    • ত্বকের যত্ন
    • নারী স্বাস্থ্য
    • বিউটি টিপস
    • মা ও শিশু
  • আইন
  • বিসিএস পরীক্ষা
  • চাকরি
  • জাগোরিক স্পেশাল
  • অন্যান্য
    • আবেদন পত্র
    • উপবৃত্তি
    • ইতিহাস ও ঐতিহ্য
    • জানা-অজানা
    • ডিপ্লোমা ইঞ্জিনিয়ারিং
    • তথ্য প্রযুক্তি
    • ষষ্ঠ শ্রেণি
      • ষষ্ঠ শ্রেণির ইসলাম ও নৈতিক শিক্ষা
      • ষষ্ঠ শ্রেণির বাংলা
      • ষষ্ঠ শ্রেণির স্বাস্থ্য সুরক্ষা
    • সকল শ্রেণির বই
    • সপ্তম শ্রেণি: ইংরেজি
    • সাধারণ জ্ঞান
    • অষ্টম শ্রেণি
      • অষ্টম শ্রেণি বাংলা
      • অষ্টম শ্রেণি: ইংরেজি ১ম
    • ইংরেজি শিখুন
    • লতা-পাতা
    • প্রথম শ্রেণি
      • প্রথম শ্রেণি ইংরেজি’
      • প্রথম শ্রেণি গণিত
      • প্রথম শ্রেণির বাংলা
No Result
View All Result
  • এসএসসি
  • এইচএসসি
  • অনার্স
  • মাস্টার্স
  • স্কিল
    • এসইও
    • ওয়েব ডিজাইন
    • কোডিং শিখুন
    • গেস্ট ব্লগিং
    • অনলাইনে ইনকাম
    • ফ্রিল্যান্সিং শিখুন
  • বিদেশে পড়াশোনা
    • স্কলারশিপ
    • আমেরিকা
    • ফিনল্যান্ড উচ্চ শিক্ষা
    • ভারত
  • স্বাস্থ্যবার্তা
    • ঔষধের নাম
    • স্বাস্থ্য
    • ত্বকের যত্ন
    • নারী স্বাস্থ্য
    • বিউটি টিপস
    • মা ও শিশু
  • আইন
  • বিসিএস পরীক্ষা
  • চাকরি
  • জাগোরিক স্পেশাল
  • অন্যান্য
    • আবেদন পত্র
    • উপবৃত্তি
    • ইতিহাস ও ঐতিহ্য
    • জানা-অজানা
    • ডিপ্লোমা ইঞ্জিনিয়ারিং
    • তথ্য প্রযুক্তি
    • ষষ্ঠ শ্রেণি
      • ষষ্ঠ শ্রেণির ইসলাম ও নৈতিক শিক্ষা
      • ষষ্ঠ শ্রেণির বাংলা
      • ষষ্ঠ শ্রেণির স্বাস্থ্য সুরক্ষা
    • সকল শ্রেণির বই
    • সপ্তম শ্রেণি: ইংরেজি
    • সাধারণ জ্ঞান
    • অষ্টম শ্রেণি
      • অষ্টম শ্রেণি বাংলা
      • অষ্টম শ্রেণি: ইংরেজি ১ম
    • ইংরেজি শিখুন
    • লতা-পাতা
    • প্রথম শ্রেণি
      • প্রথম শ্রেণি ইংরেজি’
      • প্রথম শ্রেণি গণিত
      • প্রথম শ্রেণির বাংলা
No Result
View All Result
Jagorik
No Result
View All Result

এইচটিএমএল ট্যাগ ও এট্রিবিউট (Tag & Attribute: Part-2)

জাগোরিক by জাগোরিক
in এইচটিএমএল টিউটোরিয়াল, ওয়েব ডিজাইন
Reading Time: 4 mins read
A A
2
ফেসবুকে শেয়ার করুনটুইটারে টুইট করুনপিন্টারেস্টে পিন করুনলিংকডিনে শেয়ার করুন

একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল ট্যাগ ও এট্রিবিউট সম্পর্কে বিস্তারিত।

এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-2 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব।

সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল ট্যাগ ও এট্রিবিউট (Tag & Attribute: Part-2)

এইচটিএমএল ট্যাগ টিউটোরিয়াল

আমরা যেকোন একটা এইচটিএমএল ডকুমেন্ট দেখি সেখানে অবশ্যই ট্যাগ থাকে। যেমন নিচের ডকুমেন্ট টি দেখুন এখানে <html>, <head>, </head>, <body> ইত্যাদি এক একটি ট্যাগ।

সোজা কথায় less than (<) চিহ্ন এবং greater than (>) চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা এইচটিএমএল অনুমোদিত) ট্যাগ বলে। যেমন html শব্দটি এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML  ডকুমেন্টে লিখি তখন এটার নাম html ট্যাগ। এরুপ শত শত ট্যাগ আছে এইচটিএমএল এ। যেমন প্যারাগ্রাফ ট্যাগ <p></p>, হেডিং <h1></h1> ট্যাগ ইত্যাদি।

 

01.<!DOCTYPE html>
02.<html>
03.<head>
04.<title>HTML Tag tutorial in jagorik</title>
05. 
06.</head>
07.<body>
08. 
09.<h1>jagorik demo heading</h1>
10. 
11.<p>demo content goes here.</p>
12. 
13.</body>
14.</html>

 

প্রায় সব ট্যাগেরই একটা সমাপ্তি ট্যাগ থাকে যেমন উপরে <html> ট্যাগটির সমাপ্তি ট্যাগ (closing tag বলা হয়) হচ্ছে </html> আবার <h1> এর ক্লজিং ট্যাগ হল </h1> এভাবে বাকি সবগুলি।

টেকনিকাল শব্দ যেটা ব্যবহৃত হয় সেটা হচ্ছে শুরুর ট্যাগটিকে বলে opening tag বা start tag আর শেষের ট্যাগটিকে বলে closing tag  বা end tag. দুটোই একই শুধু ক্লজিং ট্যাগে একটা ব্যাকস্লাস (/) চিহ্ন বেশি থাকে।

এই ওপেনিং এবং ক্লজিং ট্যাগের ভিতর কনটেন্ট দিতে হয়। যেমন উপরে দিয়েছি।

** এই ট্যাগই হচ্ছে এইচটিএমএল এর মুল জিনিস। শত শত ট্যাগ আছে, যত বেশি মনে রাখতে পারবেন ততই দ্রুত কাজ করতে পারবেন। তবে অনেকদিন ধরে কাজ করলে বেশিরভাগ প্রয়োজনীয় ট্যাগগুলি মুখস্থই থাকে।

** কিছু কিছু ট্যাগ আছে এগুলির ক্লজিং ট্যাগ নেই যেমন ইনপুট ট্যাগ, ইমেজ ট্যাগ ইত্যাদি। এই ট্যাগগুলি সামান্য একটু ভিন্ন।

 

1.<img src="/path/to/image.jpg" alt="an_image"/>
2.<input type="submit" value="Save"/>

 

দেখুন ইমেজ ট্যাগ শুরু হয়েছে <img এভাবে আর শেষ হয়েছে /> এই চিহ্ন দিয়ে। ইনপুট ট্যাগটিও তদ্রুপ। আর মাঝে যে জিনিসগুলি দেখছেন (src, type ইত্যাদি) এগুলি সংশ্লিষ্ট ট্যাগটির এট্রিবিউট।

* প্রতিটি ট্যাগেই নানান ধরনের এট্রিবিউট ব্যবহার করা যায়।

* প্রত্যেকটি ট্যাগরই কাজ নির্দিষ্ট করা আছে যেমন আপনার এইচটিএমএল ডকুমেন্টে আপনি যদি প্যারাগ্রাফ দিতে চান তখন <p></p> ট্যাগের ভিতর তা দিতে হবে, হেডিং দিলে <h1></h1> ট্যাগের ভিতর দিতে হবে (বড় ফন্টের হেডিং হলে <h1>, সাইজ অনুযায়ী <h6> পর্যন্ত আছে)। টেক্সট ফিল্ড দিতে হলে input ট্যাগ, ছবি দিতে চাইলে <img ট্যাগ, ব্রাউজারের টাইটেল বারে দেখানোর জন্য আছে <title></title> ট্যাগ ইত্যাদি।

* উপরে যে ডকুমেন্টটি দিয়েছি সেখানে <html></html> কে বলে প্যারেন্ট ট্যাগ পুরো ডকুমেন্ট টির জন্য কেননা পুরো ডকুমেন্টে যত ট্যাগ আছে সবগুলি এর ভিতরে রাখা হয়েছে। ভিতরের ব্যবহৃত ট্যাগগুলি হল এর চাইল্ড ট্যাগ। একইভাবে head ট্যাগের চাইল্ড ট্যাগ হল title ট্যাগ কিন্তু title ট্যাগের কোন চাইল্ড ট্যাগ নেই। আবার দেখুন body হল প্যারেন্ট ট্যাগ এবং এর চাইল্ড ট্যাগ এখানে p এবং  h1


আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)


এইচটিএমএল এট্রিবিউট টিউটোরিয়ালঃ এইচটিএমএল ট্যাগ ও এট্রিবিউট

এইচটিএমএল এর প্রতিটি এলিমেন্ট ব্রাউজারকে এক একটা নির্দেশনা দেয় যে তার ভিতরে থাকা কনটেন্টকে কিভাবে প্রদর্শন করবে।

যেমন <hr/> এলিমেন্ট ব্রাউজারকে বলে একটা আড়াআড়ি লাইন দেখাও। আবার <h1></h1> বলে একটা বড় ফন্টের শিরোনাম তৈরী কর ইত্যাদি।

অনেক এলিমেন্ট আছে যারা ব্রাউজারকে যেটা বলে সেটার সাথে আরো নতুন কিছু যোগ করে দেয়া যায়। এই যে একটা এলিমেন্টে নতুন তথ্য যোগ করলেন এটাকে সেই এলিমেন্টের এট্রিবিউট বলে। h1 এলিমেন্ট যখন ব্রাউজারকে বড় ফন্টের শিরোনাম প্রদর্শন করতে বলবে তখন এট্রিবিউট দিয়ে সেই শিরোনামটির রং কি হবে তাও বলে দিতে পারেন। যেমন

 

1.<h1 style="color:yellow;">HTML Attribute tutorial</h1>

 

অনলাইন এডিটর এ গিয়ে কোডটুকু দিয়ে “Edit and Hit” বাটনে ক্লিক করুন দেখবেন হলুদ রংয়ের শিরোনাম আউটপুট আসবে।

এখানে “style” হচ্ছে একটা এট্রিবিউট এবং “color:yellow;” হচ্ছে এট্রিবিউটটির মান। যদি এট্রিবিউটটি ব্যবহার না করেন তাহলে কিন্তু শিরোনামটির রং পরিবর্তন হতনা বাই ডিফল্ট কালো থাকতো।

অধিকাংশ ট্যাগেই এরুপ অনেক ধরনের এট্রিবিউট যোগ করা যায়।

** এট্রিবিউট লেখার নিয়ম হচ্ছে প্রথমে এট্রিবিউটটির নাম এরপর সমান চিহ্ন (=) দিয়ে কোটেশনের (“” বা ”) ভিতর এর মান। (সব ছোট হাতের অক্ষরে)

মুলত ৩ ধরনের এট্রিবিউট গ্রপ আছে যেগুলি একটা এলিমেন্টে থাকতে পারে। এর মধ্যে কোর এট্রিবিউট (core attribute) এর ব্যবহার সবচেয়ে বেশি দেখবেন।

id, class, title, style হল কোর এট্রিবিউট। এরপর থেকে পরের টিউটোরিয়ালগুলিতে এই এট্রিবিউটগুলিকে গ্লোবাল এট্রিবিউট বলা হবে। HTML 5 এ বেশকিছু নতুন এট্রিবিউট এসেছে, যেমন contenteditable, contextmenu, draggable, dropzone ইত্যাদি নিয়ে পরে বিস্তারিত আলোচনা হবে। এখানে মনে রাখুন গ্লোবাল এট্রিবিউট কয়েকটি HTML এলিমেন্ট ছাড়া সব এলিমেন্টে ব্যবহার করা হয় বা যায়।

ইন্টারন্যাশলাইজেশান এট্রিবিউট হচ্ছে dir, lang এগুলি

এবং UI event এট্রিবিউট আছে যেমন onclick, ondoubleclick, onmouseout, onkeypress ইত্যাদি। এর থেকে সব টিউটোরিয়ালে এগুলিকে ইভেন্ট এট্রিবিউট বলা হবে। তবে একটা জিনিস মনে রাখুন যে ইভেন্ট এট্রিবিউটগুলি শুধু জাভাস্ক্রিপ্ট এর কাজ এর জন্য ব্যবহৃত হয়।

id, class দিয়ে এলিমেন্টের নাম দেয়া যায় পরে সেই নাম ধরে সিএসএস স্টাইলিং করা হয়। এগুলি সিএসএস টিউটোরিয়ালে আছে।

title এট্রিবিউট কোন এলিমেন্টের দিলে এটা দিয়ে টুলটিপ আকারে তথ্য প্রদর্শন করা যায় যেমন

 

1.<h2 title="Hello jagorik">Bangladesh is a country of natural beauty</h2>

প্রদর্শন

Bangladesh is a country of natural beauty

এর উপরে মাইস নিয়ে যান তাহলে “Hello jagorik” লেখাটি টুলটিপ আকারে দেখতে পাবেন।

style এট্রিবিউটতো প্রথম উদাহরনেই দেখালাম, এখানে শুধু রং পরিবর্তন করেছি আপনি চাইলে আর অনেক সিএসএস প্রোপার্টিজ ব্যবহার করতে পারেন।

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

 

উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।

এই বিভাগের আরো লেখা

এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম (Part-12)

অক্টোবর ২২, ২০২২
এইচটিএমএল টেক্সক্ট ফিল্ড আপলোড ও ড্রপডাউন
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল টেক্সক্ট ফিল্ড আপলোড ও ড্রপডাউন (Part-13)

অক্টোবর ২২, ২০২২
এইচটিএমএল বোল্ড ও ইটালিক কোড এবং pre ট্যাগ
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল বোল্ড ও ইটালিক কোড এবং pre ট্যাগ (Part-11)

অক্টোবর ২১, ২০২২
এইচটিএমএল লেআউট ও কমেন্ট
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল লেআউট ও কমেন্ট (Layout&Comment:Prt-8)

অক্টোবর ২১, ২০২২
এইচটিএমএল বডি ও ডিভ
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল বডি ও ডিভ (HTML Body & Div: Part-10)

অক্টোবর ২১, ২০২২
এইচটিএমএল কালার কোড ও ফ্রেম
এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল কালার কোড ও ফ্রেম (Color & Frame: Part-7)

অক্টোবর ২১, ২০২২
Next Post
এইচটিএমএল প্যারাগ্রাফ ও হেডিং

এইচটিএমএল প্যারাগ্রাফ ও হেডিং (P tag & Heading: Part-3)

এইচটিএমএল লিস্ট ও ফন্ট

এইচটিএমএল লিস্ট ও ফন্ট (HTML List & Font: Part-4)

এইচটিএমএল লিংক ও এনটাইটিজ

এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)

Comments ২

  1. Pingback: এইচটিএমএল টেক্সক্ট ফিল্ড আপলোড ও ড্রপডাউন (Part-13) - Jagorik
  2. Pingback: এইচটিএমএল সুপারস্ক্রিপ্ট সাবস্ক্রিপ্ট ও ফর্ম (Part-12) - Jagorik

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

জনপ্রিয় লেখাগুলো

No Content Available

অন্যান্য বিভাগ থেকে

PDF রাজনৈতিক তত্ত্ব পরিচিতি লক সংক্ষিপ্ত প্রশ্নোত্তর

PDF রাজনৈতিক তত্ত্ব পরিচিতি লক: সংক্ষিপ্ত প্রশ্নোত্তর

ডিসেম্বর ১৭, ২০২২
HSC English 2nd Paper Model Question 35 With Answer PDF

HSC | English 2nd Paper | Model Question 35 | With Answer | PDF 

আগস্ট ২৬, ২০২৩
SSC English 1st Paper All Papers

SSC English 1st Paper All Papers

মে ৩, ২০২৩
অনার্স ১ম পর্ব (২১১৫০১-২য় অধ্যায়) রচনামূলক পর্বঃ১

অনার্স ১ম পর্ব (২১১৫০১-২য় অধ্যায়) রচনামূলক পর্বঃ১

নভেম্বর ৩, ২০২২
  • আমাদের সম্পর্কে
  • গোপনীয় নীতি
  • জাগোরিকে লিখুন
  • বিজ্ঞাপন
  • যোগাযোগ করুন
  • শর্তাবলী
Call us: +1 234 JEG THEME

© ২০২৩ জাগোরিক - সর্বস্বত্ব স্বত্বাধিকার সংরক্ষিত

No Result
View All Result
  • এসএসসি
  • এইচএসসি
  • অনার্স
  • মাস্টার্স
  • স্কিল
    • এসইও
    • ওয়েব ডিজাইন
    • কোডিং শিখুন
    • গেস্ট ব্লগিং
    • অনলাইনে ইনকাম
    • ফ্রিল্যান্সিং শিখুন
  • বিদেশে পড়াশোনা
    • স্কলারশিপ
    • আমেরিকা
    • ফিনল্যান্ড উচ্চ শিক্ষা
    • ভারত
  • স্বাস্থ্যবার্তা
    • ঔষধের নাম
    • স্বাস্থ্য
    • ত্বকের যত্ন
    • নারী স্বাস্থ্য
    • বিউটি টিপস
    • মা ও শিশু
  • আইন
  • বিসিএস পরীক্ষা
  • চাকরি
  • জাগোরিক স্পেশাল
  • অন্যান্য
    • আবেদন পত্র
    • উপবৃত্তি
    • ইতিহাস ও ঐতিহ্য
    • জানা-অজানা
    • ডিপ্লোমা ইঞ্জিনিয়ারিং
    • তথ্য প্রযুক্তি
    • ষষ্ঠ শ্রেণি
      • ষষ্ঠ শ্রেণির ইসলাম ও নৈতিক শিক্ষা
      • ষষ্ঠ শ্রেণির বাংলা
      • ষষ্ঠ শ্রেণির স্বাস্থ্য সুরক্ষা
    • সকল শ্রেণির বই
    • সপ্তম শ্রেণি: ইংরেজি
    • সাধারণ জ্ঞান
    • অষ্টম শ্রেণি
      • অষ্টম শ্রেণি বাংলা
      • অষ্টম শ্রেণি: ইংরেজি ১ম
    • ইংরেজি শিখুন
    • লতা-পাতা
    • প্রথম শ্রেণি
      • প্রথম শ্রেণি ইংরেজি’
      • প্রথম শ্রেণি গণিত
      • প্রথম শ্রেণির বাংলা

© ২০২৩ জাগোরিক - সর্বস্বত্ব স্বত্বাধিকার সংরক্ষিত

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In