এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

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

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল এট্রিবিউট


সচরাচর ব্যবহৃত কিছু এইচটিএমএল এট্রিবিউট এবং এদের ব্যবহারঃ

এট্রিবিউট বর্ণনা
alt এই এট্রিবিউটটি <img> ট্যাগে ব্যবহৃত হয়। ইমেজ প্রদর্শিত না হলে বিকল্প হিসাবে এই এট্রিবিউট এর টেক্সট ব্রাউজারে প্রদর্শিত হয়।
charset এই এট্রিবিউটটি <meta> ট্যাগে ব্যবহৃত হয়। অর্থাৎ অক্ষর/ক্যারেক্টার এনকোডিং(encoding) নির্ধারণ করার জন্য এটি ব্যবহার করা হয়।
disabled এই এট্রিবিউটটি <input> ট্যাগে ব্যবহৃত হয়। অর্থাৎ একটি নির্দিষ্ট ইনপুট এলিমেন্টকে অকেজো(disable) করতে এই এট্রিবিউট ব্যবহার করা হয়।
href এই এট্রিবিউটটি <a> ট্যাগে ব্যবহৃত হয়। অর্থাৎ একটি লিঙ্কের URL সেট করতে এটি ব্যবহার করা হয়।
lang ডকুমেন্টের ভাষা সংক্রান্ত তথ্য ধারণ করে।
id একটি এলিমেন্টের জন্য ইউনিক নাম সেট করে।
src একটি ইমেজ বা স্ক্রিপ্ট এর সোর্স সেট করে।
style একটি এলিমেন্টকে ইনলাইন স্টাইল করার জন্য এটি ব্যবহার করা হয়।
title একটি এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য সংযুক্ত করতে এটি ব্যবহার করা হয়। title যুক্ত এলিমেন্টের উপর মাউস নিয়ে আসলে টুলটিপ হিসেবে টাইটেল এট্রিবিউট এর কন্টেন্ট প্রদর্শিত হয়।

এইচটিএমএল এলিমেন্টের সকল এট্রিবিউটের তালিকা ও এদের ব্যবহার দেখার জন্য এইচটিএমএল এট্রিবিউট রেফারেন্স পেজটি ভিজিট করুন।


alt এট্রিবিউট

ইমেজ প্রদর্শিত না হলে ইমেজের বিকল্প হিসেবে একটি টেক্সট সেট করার জন্য alt এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল alt এট্রিবিউট</title>
</head>
<body>
  <img src="satt.png" alt="sattacademy.com" width="142" height="142">
</body>
</html>

ফলাফল


charset এট্রিবিউট

ডকুমেন্টের অক্ষর/ক্যারেক্টার এনকোডিং(encoding) নির্ধারণ করার জন্য <meta> ট্যাগের মধ্যে charset এট্রিবিউট ব্যবহার করা হয়।

ইংরেজী ছাড়া অন্য যেকোনা ভাষা ব্রাউজারে সঠিকভাবে প্রদর্শন করানোর জন্য charset ="utf-8" ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>এইচটিএমএল charset এট্রিবিউট</title>
</head>
<body>
  <p>ইংরেজী ছাড়া অন্য যেকোনা ভাষা ব্রাউজারে সঠিকভাবে প্রদর্শন করানোর
   জন্য charset="utf-8" ব্যবহার করা হয়।</p>
   <p>নিজে চেষ্টা করার সময় আমাদের উদাহরণগুলোতে ব্যবহৃত বাংলা  ফন্ট 
   যদি আপনার ব্রাউজারে সাপোর্ট না করে বা বাংলা ফন্ট ভেঙ্গে যায় তাহলে charset="utf-8" 
   ব্যবহার করে ফন্ট সমস্যা দূর করতে পারেন।</p>
</body>
</html>

ফলাফল


href এট্রিবিউট

এইচটিএমএল <a>, <area>, <base>, <link> ট্যাগের URL href এট্রিবিউটের মাধ্যমে সেট করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল href এট্রিবিউট</title>
</head>
<body>
  <a href="http://www.sattacademy.com">এটি একটি লিঙ্ক</a>
</body>
</html>

ফলাফল


lang এট্রিবিউট

ডকুমেন্টের ভাষা সেট করার জন্য <html> ট্যাগের মধ্যে lang এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <title>এইচটিএমএল lang এট্রিবিউট</title>
</head>
<body>
  <p>ডকুমেন্টের ভাষা সেট করার জন্য <html> ট্যাগের মধ্যে lang এট্রিবিউট
   ব্যবহার করা হয়।</p>
</body>
</html>

src এট্রিবিউট

এইচটিএমএল <img> এবং <script> ট্যাগের সোর্স ফাইল যোগ করার জন্য src এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল src এট্রিবিউট</title>
</head>
<body>

  <img src="../satt.png" width="142" height="142">

</body>
</html>

ফলাফল




title এট্রিবিউট

এলিমেন্টের উপর মাউস হোভার করলে টুলটিপ আকারে টেক্সট প্রদর্শনের জন্য title এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল title এট্রিবিউট</title>
</head>
<body>
  <p title="এটি একটি টুলটিপ">এই প্যারাগ্রাফের উপর মাউস নিয়ে আসলে title এট্রিবিউটের 
  ভ্যালু টুলটিপ আকারে দেখাবে।</p>
</body>
</html>

ফলাফল


এট্রিবিউটকে সর্বদাই ছোট হাতের অক্ষরে লিখুন

এইচটিএমএল(৫)-এ এট্রিবিউটের নাম ছোট হাতের অক্ষরে লেখা বাধ্যতামূলক নয়।

charset এট্রিবিউটটি বড়হাতের অক্ষর(capital letter) অথবা ছোট হাতের অক্ষরে(small letter) লিখা যায়। যেমন- Charset অথবা CHARSET

যাইহোক, W3C এইচটিএমএল এট্রিবিউটগুলো সর্বদা ছোট হাতের অক্ষরে লেখার সুপারিশ করে।


এট্রিটিউটের ভ্যালুতে কোটেশন মার্কের ব্যবহার

এইচটিএমএল(৫)-এ এট্রিবিউটের ভ্যালু কোটেশনের("") মধ্যে লেখা বাধ্যতামূলক নয়।

যেমন- উপরের বর্ণনা অনুযায়ী href এট্রিবিউটকে কোটেশন("") ছাড়াই লিখা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল এট্রিবিউট</title>
</head>
<body>
  <a href=http://www.sattacademy.com>এটি একটি লিংক</a>
</body>
</html>

ফলাফল


কিন্তু মাঝে মাঝে কোটেশন("") ব্যবহারের প্রয়োজন হয়। যেমন- নিচের উদাহরণটিতে title এট্রিবিউটের ভ্যালুতে স্পেস থাকায় এটি সঠিক ভাবে কাজ করবে না।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল এট্রিবিউট</title>
</head>
<body>
  <p title=Satt Academy>যদি এট্রিবিউটের ভ্যালুর মধ্যে কোন স্পেস(space) থাকে 
  তবে আপনি কোটেশন("") বাদ দিতে পারবেন না।</p>
</body>
</html>

ফলাফল


সিংগেল(' ') বা ডাবল(" ") কোটেশন

এইচটিএমএল এট্রিবিউটের ভ্যালু লেখার জন্য সচরাচর ডাবল("") কোটেশন ব্যবহার করা হয়। তবে আমরা সিংগেল(' ') কোটেশনও ব্যবহার করতে পারি।

যাইহোক পরিস্থিতি বুঝে এবং প্রয়োজন অনুযায়ী এট্রিবিউটের ভ্যালুতে সিংগেল/ডাবল কোটেশন ব্যবহার করা হয়।

<p title='"স্যাট" একাডেমী'>স্যাট একাডেমী</p>

অথবা বিপরীতভাবেও ব্যবহার করতে পারি।

<p title="'স্যাট' একাডেমী">স্যাট একাডেমী</p>

অধ্যায়ের সারাংশ

  1. সকল এইচটিএমএল এলিমেন্টে এট্রিবিউট থাকতে পারে।
  2. alt এট্রিবিউট পাঠকদের জন্য টেক্সট প্রদান করে।
  3. href এট্রিবিউট লিংকের URL নির্ধারণ করে।
  4. lang এট্রিবিউট ডকুমেন্টের ভাষা সেট করে।
  5. src এট্রিবিউট সোর্স url নির্ধারণ করে।
  6. title এট্রিবিউট "tool-tip" আকারে তথ্য প্রদান করে।