«

»

HTML শিখুন HTML5 সহ (পার্ট-4) HTML Attribute

এর আগের পর্বের লিঙ্ক, পুনারায় একবার দেখে আসুন।

HTML শিখুন HTML5 সহ (পার্ট-3) HTML Element

 

আমরা যে সকল ওয়েব পেজ দেখি সেখানে তো অনেক লেখা, উপাদান বা অনেক তথ্য সাজানো থাকে। তা কিন্তু এমনিতেই সাজানো থাকে না। কোন উপাদান কি ভাবে সাজানো থাকবে, দেখতে কি রকম হবে, ওয়েব পেজ এর কোথায় ও কতটুকু জায়গা নিয়ে বসবে এ সকল বিষয় গুলোই হচ্ছে Attribute বা বৈশিষ্ট্য। এগুলো HTML Attribute দ্বারা ঠিক করে দেওয়া হয়।

Element কি তা বলছি এর আগের টুইটে। প্রত্যেক Element এর নির্দিষ্ট বৈশিষ্ট্য বা Attribute থাকতে পারে। এখানে পারে বলছি, কারন কোন কোন ক্ষেত্রে না ও থাকতে পারে। একটি HTML Element এর জন্য অতিরিক্ত এই বৈশিষ্ট্য গুলো HTML Attribute দ্বারা দেওয়া হয়। Start Tag কি তা জানি আমরা। HTML Attribute গুলো Start Tag এর ভিতরে লেখা হয়, কিন্তু অবশ্যই End Tag ব্যবহার করা যাবে না। এবং নিছের মত করে লেখা হয়ঃ

name=”value”

এখানে name হচ্ছে HTML Attribute এর নাম। value হচ্ছে ঐ HTML Attribute এর মান। এই name এবং value গুলো  নির্দিষ্ট। একটা মান এবং নামের জন্য HTML Element গুলো এক এক রকম দেখা যাবে। এবং একটি সম্পুর্ন element এ নিচের মত করে লেখা হয়ঃ

<a href=”http://techtweets.com.bd”>This is a new Tech Blog</a>

এখানে a Element বা Link Element এ Attribute ব্যবহার করা হয়েছে। যেখানে, Attribute name হচ্ছে href এবং value হচ্ছে http://techtweets.com.bd।

Value গুলো সব সময় Double Quote এর মধ্যে লেখা হয়। আর সব সময় ছোট হাতের অক্ষরে লেখা হয়।

কিছু Attribute globally নির্ধারন করা যায় এবং যেকোন Element এ ব্যবহার করা যায়। আবার কিছু কিছু Attribute নির্দিষ্ট Element এর জন্য ব্যবহার করা হয়।

Globally নির্ধারন করতে Attribute গুলো Head Tag এর মধ্যে লিখতে হয়।

যদি কোন Element এ কোন  attribute না থাকে তাকে Empty Attributes বলে।

নিছে HTML Attribute গুলো দেওয়া হলঃ

প্রথমে প্রধান HTML Attribute গুলোঃ

Attribute Value(মান) বর্ননা।
class classname এটি Element এর জন্য Class name ঠিক করে।এটি CSS বা Style Shit এর জন্য ববহার করা হয়।
Id id প্রত্যেকটা Element এর জন্য একটি  id ঠিক করে।
Style style_definition inline style দেওয়া হয়। (inline style সম্পর্কে পরে বলব)
Title text একটা Element এর জন্য অতিরিক্ত তথ্য দেওয়ার জন্য ব্যবহার করা হয়।

 

ভাষার জন্য ব্যবহৃত Attribute গুলোঃ

 

Attribute Value(মান) বর্ননা
dir ltr
rtl
একটি Element এর Text গুলোর দিক নির্দিষ্ট করা হয়।
lang language_code কোন নির্দিষ্ট একটি ভাষা লেখার জন্য ব্যবহার করা হয়।

 

আমাদের তো সকল language code ধরকার নেই, তাই না? বাংলার কোড হচ্ছেঃ bn আর ইংরেজীরঃ en।

কীবোর্ডের জন্য ব্যবহৃত Attribute গুলোঃ

 

Attribute Value(মান) বর্ননা
accesskey character একটা element এ যাওয়ার জন্য সর্টকার্ট কী তৈরি করার জন্য ব্যবহার করা হয়।
tabindex number কীবোর্ডের Tab কী তে কোন Element এর  order কি হবে তা নির্ধারন করে।

 

এবার দেখি HTML5 Global Attributes গুলো।

 

Attribute Value(মান) বর্ননা
accesskey character একটা element এ যাওয়ার জন্য সর্টকার্ট কী তৈরি করার জন্য ব্যবহার করা হয়।
class classname এটি Element এর জন্য Class name ঠিক করে। এটি CSS বা Style Shit এর জন্য ববহার করা হয়।
contenteditable true
false
ব্যবহার কারীক কোন লেখা বা উপাদান সম্পাদনা করতে পারবে কি পারবে না তা নির্দিষ্ট করে।
contextmenu menu_id context menu দেওয়ার জন্য ব্যবহার হয়।
dir ltr
rtl
একটি Element এর Text গুলোর দিক নির্দিষ্ট করা হয়।
draggable true
false
auto
Drag  করার জন্য বব্যবহার করা হয়।
dropzone copy
move
link
কোন জাগায় Drag করা গুলো ছেড়ে দেওয়ার জায়গা ঠিক করে।
hidden hidden কোন উপাদান লুকাতে ব্যবহার করা হয়।
id id প্রত্যেকটা Element এর জন্য একটি  id ঠিক করে।
lang language_code কোন নির্দিষ্ট একটি ভাষা লেখার জন্য ব্যবহার করা হয়।
spellcheck true
false
spelling এবং grammar চেক করার জন্য বয়বহার করা হয়।
style style_definition inline style দেওয়ার জন্য ববহৃত হয়।
tabindex number কীবোর্ডের Tab কী তে কোন Element এর  order কি হবে তা নির্ধারন করে।
title text একটা Element এর জন্য অতিরিক্ত তথ্য দেওয়ার জন্য ব্যবহ্রা করা হয়।

HTML এর Global Attributes গুলোর সাথে কিছু নতুন Attributes যোগ করে HTML5 Global Attributes তৈরি করা হয়েছে। যা আপনারা ইতি মধ্যে লক্ষ্য করছেন। মানে হল যদি আপনার আগে HTML শিখা থাকে তাহলে আপনাকে আর বেশি কষ্ট করতে হবে না HTML5 শিখার জন্য। তা বলে মনে করবেন না আমি আপনাদের কে বলছি নতুন করে HTML শিখতে। HTML আর HTM5 একই জিনিস। নতুন কিছু বৈশিষ্ট যোগ করেই হল HTM5, আর কিছু না। তাই ভায় পাওয়ার কোন কারন নেই। নিছের উধারন টি দেখুনঃ

<!DOCTYPE HTML><html>

<body>
<p><title=”Bangla Technology Blog”><b>TechTweets</b> A New Bangla Technology Blogging Platform</p>

<p>Visit <a href=”http://www.techtweets.com.bd”>TechTweets</a> now to broaden your Technology outlook </p>
</body>

</html>

ইনপুট আর আউট পুট নিছে এক সাথে দিলাম।

 

ব্যাখ্যাঃ

<p><abbr title=”Bangla Technology Blog”><b>TechTweets</b></abbr> A New Bangla Technology Blogging Platform</p>

এই এখানে কয়েকটি ট্যাগ ও Attribute এক সাথে ব্যবহার করা হয়েছে।

প্রথমে P ট্যাগ ব্যবহার করে সব গুলোকে paragraph হিসেবে লেখা হয়েছে। তারপর <abbr title=”Bangla Technology Blog”><b>TechTweets</b></abbr> এ অংশে abbr হচ্ছে আরেকটি HTML Tag. যা দিয়ে কোন উপাদানের Abbreviation দেওয়া হয়। আর  title হচ্ছে একটি Attribute. যা দিয়ে কোন একটা Element এর জন্য অতিরিক্ত তথ্য দেওয়ার জন্য ব্যবহৃত হয়। এখানে আমরা এ Attribute ব্যবহার করছি TechTweets এর জন্য আরো কিছু তথ্য দেওয়ার জন্য। যখন TechTweets এর উপর মাউস নেওয়া হবে তখন Bangla Technology Blog এ লেখা টি উঠবে। তার পর সব গুলো Tag শেষ করলাম।

পরবর্তীতে <p>Visit <a href=”http://www.techtweets.com.bd”>TechTweets</a> now to broaden your Technology outlook </p> এখানে P Tag এর মধ্যে আরেকটি  Attribute ব্যবহার করাহল। <a href=”http://www.techtweets.com.bd”>TechTweets</a> এটি দিয়ে TechTweets এর মধ্যে একটি লিঙ্ক তৈরি করা হল।

এবার আপনার চেষ্টা করার পালা। নিজে নিজে চেষ্টা করুন। কোন সমস্যা হলে জানাবেন প্লিজ।

সবগুলো Attribute এর ব্যবহার এক সাথে দেওয়া সম্ভব নয়। আপনার নিজে নিজে চেষ্টা করবেন। কোন সমস্যা হলে জানাবেন। আমি ও আস্তে আস্তে ব্যবহার নিয়ে টুইট করব।

 

আউয়াল ভাইয়ের নিকট কৃতজ্ঞ, উনার জন্যই এত দ্রুত এ পর্বটি দিতে পারলাম।

পরের পর্বঃ

HTML শিখুন HTML5 সহ [পর্ব-5]


এ সম্পর্কিত আরো কিছু টুইট:

সাইবার ওয়ার থেকে রক্ষা পেতে জেনে নিন ওয়ার্ডপ্রেস ব্লগ সিকিউরিটির কিছু প্রয়োজনীয় পদক্ষেপ।
প্রফেশনাল PSD Web Template - Part 6 ( কালার ফুল টেমপ্লেট অসমাপ্ত অংশ)
ইন্টারনেট ও তথ্যপ্রযুক্তি সম্পর্কে যাবতীয় তথ্য জানতে চাইলে PDF ফাইলটি এখনি ডাউনলোড করে নিন (না দেখলে...
কিছু কমন ভুল যেগুলো সুধরে নেয়া জরুরী
আপনি কি ওয়েবসাইট ডিজাইনার / ডেভেলপার ?
ওয়েব ডিজাইন শেখার জন্য যে ৬ টি বিষয় না জানলে ই নয়
কখন revenuehits এর এড সমূহের রুপ পরিবর্তন ?

মন্তব্য দিনঃ

comments

About the author

জাকির হোসাইন

প্রোগ্রামিং বা ফ্রীল্যান্সিং নিয়ে কোন প্রশ্ন থাকলে টেকটুইটস সাহায্য বিভাগে পোস্ট দিতে পারেন অথবা আমাকে ফেসবুকে মেসেজ দিতে পারেন।

Permanent link to this article: http://techtweets.com.bd/web-developing/jakirbdl/772

10 comments

Skip to comment form

  1. আউয়াল

    স্যার ধন্যবাদ আপনাকে পর্বটি দ্রুত দেওয়ার জন্য।। আসলে এই সাইট থেকে html শিখতে চাই বলেই আপনাকে একটু বেশি বিরক্ত করছি।

    1. ঐ ছেলেটি
      jakir

      আমি আছি, দেখি কত টুকু বিরক্ত করতে পারেন। আর সমস্যা হলে বলবেন। যদি বেশি হয় তাহলে একটা মেসেজ দিয়ে ফেসবুকে পাঠিয়ে দিবেন।

  2. kishor

    অসাধারন ।
    can i send a friend request in faceboook.

    1. ঐ ছেলেটি
      jakir

      ধন্যবাদ, আমার ফেসবুক আইডি উপরে দেওয়া আছে। ইচ্ছে করলে দিতে পারেন।

  3. Sayeam

    হুম…. এতদিনে কিছু শিখতে পেরে একটু একটু ভাল লাগছে……:)

    1. ঐ ছেলেটি
      jakir

      শিখাতে পেরে আমার ও খারাপ লাগছে না।

  4. aowal

    Attribute valu
    class classname
    Id id
    উদাহরন স্বরুপ একটা ডকূমেণ্ট দিলে বুজতে সুবিধা হত।

  5. foolish pritom

    ek raate 4 ti tweet (html) shesh korlam….eibar no.5……….doa korben jeno shikhte pari…

  6. aowalbd

    চালাইয়া যান আরে ভাই এইসব টুইট থেকে ও ্যদি আমরা না শিখি তাহলে নিজেদেরকে দুর্বাগা বলতে হবে।

  7. HALIM
    HALIM

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

মন্তব্য করুন