এইচটিএমএল বৈশিষ্ট্য
HTML বৈশিষ্ট্যগুলি HTML উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।
এইচটিএমএল বৈশিষ্ট্য
- সমস্ত HTML উপাদানের বৈশিষ্ট্য থাকতে পারে
- গুণাবলী উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে
- বৈশিষ্ট্যগুলি সর্বদা খোলার ট্যাগে উল্লেখ করা হয়
- গুণাবলী সাধারণত নাম/মান জোড়ায় আসে:
name="value"
মৌলিক বিন্যাস:
<tagname attribute="value">কন্টেন্ট</tagname>
href বৈশিষ্ট্য
<a>ট্যাগ একটি হাইপারলিংক সংজ্ঞায়িত করে।hrefবৈশিষ্ট্যটি লিঙ্কটি যে পৃষ্ঠায় যাবে তার URL নির্দিষ্ট করে:
উদাহরণ
<a href="https://www.jassifteam.com">Visit Jassif Team</a>আপনি আমাদের HTML লিঙ্ক অধ্যায়ে লিঙ্ক সম্পর্কে আরও শিখবেন।
href বৈশিষ্ট্য
লিঙ্কের গন্তব্য নির্দিষ্ট করে
সম্পূর্ণ URL
href="https://www.example.com"
src বৈশিষ্ট্য
<img>ট্যাগ একটি HTML পৃষ্ঠায় একটি ইমেজ এম্বেড করতে ব্যবহৃত হয়।srcattribute প্রদর্শন করা ইমেজের পথ নির্দিষ্ট করে:
উদাহরণ
<img src="girl_image.jpg">srcএকটি বৈশিষ্ট্যে একটি URL নির্দিষ্ট করার দুটি উপায় রয়েছে:
1. সম্পূর্ণ URL
অন্য ওয়েবসাইটে হোস্ট করা একটি বহিরাগত ছবির লিঙ্ক।
উদাহরণ: src="https://www.jassifteam.com/images/girl_image.jpg"
নোট:
. আপনি এটি ব্যবহার করার অনুমতি না পেলে, আপনি কপিরাইট আইন লঙ্ঘন করতে পারেন. উপরন্তু, আপনি বহিরাগত ছবি নিয়ন্ত্রণ করতে পারবেন না; এটি হঠাৎ মুছে ফেলা বা পরিবর্তন করা যেতে পারে।
2. আপেক্ষিক URL
ওয়েবসাইটের মধ্যে হোস্ট করা একটি ছবির লিঙ্ক।
এখানে, ডোমেইন নাম URL-এ অন্তর্ভুক্ত করা হয় না। যদি URL একটি স্ল্যাশ ছাড়া শুরু হয়, এটি বর্তমান পৃষ্ঠার সাথে আপেক্ষিক।
উদাহরণ: src="images/girl_image.jpg"
পরামর্শ:
আপেক্ষিক URL ব্যবহার করা প্রায় সবসময়ই ভালো। আপনি ডোমেইন পরিবর্তন করলে তারা ভাঙ্গবে না।
প্রস্থ এবং উচ্চতা বৈশিষ্ট্য
<img>ট্যাগwidthএবংheightইমেজের প্রস্থ এবং উচ্চতা (পিক্সেলে) নির্দিষ্ট করে এমন বৈশিষ্ট্যগুলিও থাকতে হবে:
উদাহরণ
<img src="girl_image.jpg" width="500" height="600">সর্বোত্তম অনুশীলন:
প্রি-অ্যাসাইন পৃষ্ঠা লেআউট এবং পৃষ্ঠা লোডিং গতি উন্নত করতে সর্বদা চিত্রগুলিতে প্রস্থ এবং উচ্চতার বৈশিষ্ট্য যুক্ত করুন।
alt বৈশিষ্ট্য
<img>ট্যাগ আবশ্যকaltঅ্যাট্রিবিউট একটি ইমেজের জন্য বিকল্প টেক্সট নির্দিষ্ট করে, যদি কোনো কারণে ছবিটি প্রদর্শন করা না যায়। It's a slow connection, orsrcঅ্যাট্রিবিউটে কোনো ত্রুটির কারণে বা ব্যবহারকারী স্ক্রিন রিডার ব্যবহার করলে হতে পারে।
উদাহরণ
<img src="girl_image.jpg" alt="Girl with a jacket">উদাহরণ
আপনি যদি বিদ্যমান নেই এমন একটি চিত্র কল্পনা করার চেষ্টা করেন তবে কী হবে তা দেখুন:
<img src="image_typo.jpg" alt="Girl with a jacket">আপনি আমাদের HTML চিত্র অধ্যায়ে ইমেজ সম্পর্কে আরও জানতে পারবেন।
অ্যাক্সেসযোগ্যতা:
altঅন্ধ ব্যবহারকারী এবং স্ক্রিন রিডার ব্যবহারকারীদের জন্য বৈশিষ্ট্যটি অপরিহার্য। সর্বদা আপনার ছবিগুলিকে অর্থপূর্ণ বিকল্প পাঠ্য দিন।
শৈলী বৈশিষ্ট্য
styleবৈশিষ্ট্যগুলি একটি উপাদানে রঙ, ফন্ট, আকার এবং আরও অনেক কিছু যুক্ত করতে ব্যবহৃত হয়।
উদাহরণ
<p style="color:red;">This is a red paragraph.</p>আপনি আমাদের HTML শৈলী অধ্যায়ে শৈলী সম্পর্কে আরও শিখবেন।
রঙ
style="color:red;"
ফন্টের আকার
style="font-size:20px;"
পটভূমির রঙ
style="background-color:yellow;"
lang বৈশিষ্ট্য
ওয়েব পেজের ভাষা ঘোষণা করতে,<html>ট্যাগের ভিতরেlangসর্বদা বৈশিষ্ট্য অন্তর্ভুক্ত করুন. .
নিম্নলিখিত উদাহরণটি ভাষা হিসাবে ইংরেজি নির্দিষ্ট করে:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>দেশের কোডগুলিওlangআপনি অ্যাট্রিবিউটে ভাষা কোড যোগ করতে পারেন। সুতরাং, প্রথম দুটি অক্ষর HTML পৃষ্ঠার ভাষা সংজ্ঞায়িত করে এবং শেষ দুটি অক্ষর দেশকে সংজ্ঞায়িত করে।
নিম্নলিখিত উদাহরণটি ভাষা হিসাবে ইংরেজি এবং দেশ হিসাবে মার্কিন যুক্তরাষ্ট্রকে নির্দিষ্ট করে:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>আপনি আমাদের HTML ভাষা কোড রেফারেন্সে সমস্ত ভাষার কোড দেখতে পারেন।
শিরোনাম বৈশিষ্ট্য
titleএকটি বৈশিষ্ট্য একটি উপাদান সম্পর্কে কিছু অতিরিক্ত তথ্য সংজ্ঞায়িত করে।
titleআপনি যখন উপাদানটির উপর মাউস সরান তখন বৈশিষ্ট্যের মানটি টুলটিপ হিসাবে প্রদর্শিত হয়:
উদাহরণ
<p title="I'm a tooltip">This is a paragraph.</p>টুল সাহায্য:
শিরোনাম বৈশিষ্ট্যটি লুকানো তথ্য বা অতিরিক্ত ব্যাখ্যা প্রদানের জন্য দুর্দান্ত, তবে প্রয়োজনীয় তথ্যের জন্য ব্যবহার করা উচিত নয়।
আমরা ছোট হাতের অ্যাট্রিবিউট ব্যবহার করার পরামর্শ দিই
এইচটিএমএল স্ট্যান্ডার্ডে ছোট হাতের অ্যাট্রিবিউট নামের প্রয়োজন নেই।
titleবৈশিষ্ট্য (এবং অন্যান্য সমস্ত বৈশিষ্ট্য)titleবাTITLEবড় হাতের বা ছোট হাতের অক্ষরে লেখা যেতে পারে।
যাইহোক, W3C এইচটিএমএল-এ ছোট হাতের অ্যাট্রিবিউটের সুপারিশ করে এবং XHTML-এর মতো কঠোর নথির ধরনের জন্য ছোট হাতের অ্যাট্রিবিউটের প্রয়োজন।
জাসিফ টিম সুপারিশ:
Jassif টিমে আমরা সর্বদা ছোট হাতের বৈশিষ্ট্যের নাম ব্যবহার করি।
আমরা উদ্ধৃতি চিহ্নগুলিতে বৈশিষ্ট্যের মান লেখার পরামর্শ দিই
এইচটিএমএল স্ট্যান্ডার্ডে অ্যাট্রিবিউট মানের চারপাশে উদ্ধৃতি চিহ্নের প্রয়োজন হয় না।
যাইহোক, W3C HTML-এ উদ্ধৃতি চিহ্নের সুপারিশ করে এবং XHTML-এর মতো কঠোর নথির প্রকারের জন্য উদ্ধৃতি চিহ্নের প্রয়োজন।
ভালো:
<a href="https://www.jassifteam.com/html/">Visit our HTML tutorial</a>সবচেয়ে খারাপ:
<a href=https://www.jassifteam.com/html/>Visit our HTML tutorial</a>কখনও কখনও আপনাকে উদ্ধৃতি চিহ্ন ব্যবহার করতে হবে। এই উদাহরণtitleবৈশিষ্ট্যটি সঠিকভাবে প্রদর্শিত হয় না কারণ এতে একটি স্থান রয়েছে:
<p title=Description of Jassif Team>জাসিফ টিম সুপারিশ:
Jassif টিমে আমরা সবসময় অ্যাট্রিবিউট মানের চারপাশে উদ্ধৃতি চিহ্ন ব্যবহার করি।
একক বা ডবল উদ্ধৃতি চিহ্ন?
এইচটিএমএল-এ অ্যাট্রিবিউট মানের আশেপাশে ডবল উদ্ধৃতি চিহ্নগুলি সবচেয়ে সাধারণ, তবে একক উদ্ধৃতি চিহ্নগুলিও ব্যবহার করা যেতে পারে।
কিছু পরিস্থিতিতে, একক উদ্ধৃতি ব্যবহার করা প্রয়োজন যখন বৈশিষ্ট্যের মান নিজেই দ্বিগুণ উদ্ধৃতি ধারণ করে:
<p title='John "ShotGun" Nelson'>অথবা তদ্বিপরীত:
<p title="John 'ShotGun' Nelson">ধারাবাহিকতা:
অভিন্ন উদ্ধৃতি চিহ্ন ব্যবহার করে আপনার কোডে ধারাবাহিকতা বজায় রাখুন। এইচটিএমএল-এ ডাবল কোটেশন মার্ক খুব সাধারণ।
অধ্যায়ের সারাংশ
- সমস্ত HTML উপাদানের বৈশিষ্ট্য থাকতে পারে
<a>এরhrefবৈশিষ্ট্যটি লিঙ্কটি যে পৃষ্ঠায় যাবে তার URL নির্দিষ্ট করে৷<img>এরsrcattribute প্রদর্শন করা ছবির পথ নির্দিষ্ট করে<img>এরwidthএবংheightগুণাবলী ছবির জন্য পরিমাণগত তথ্য প্রদান করে<img>এরaltঅ্যাট্রিবিউট একটি ইমেজের জন্য Alt টেক্সট প্রদান করেstyleবৈশিষ্ট্যগুলি একটি উপাদানে রঙ, ফন্ট, আকার এবং আরও অনেক কিছু যুক্ত করতে ব্যবহৃত হয়<html>ট্যাগেরlangবৈশিষ্ট্যটি ওয়েব পৃষ্ঠার ভাষা ঘোষণা করেtitleএকটি বৈশিষ্ট্য একটি উপাদান সম্পর্কে কিছু অতিরিক্ত তথ্য সংজ্ঞায়িত করে