ওয়েবসাইট ডিজাইন করতে হলে আর কিছু না জানেন এইচটিএমএল জানতেই হবে এইচটিএমএল ছাড়া ওয়েবসাইট ভাবা ই জাইনা তাই আমাদের এইচটিএমএল টিউটোরিয়াল গুলি মনোযোগ সহকারে পরার এবং বুঝার চেষ্টা করবেন যেখানে না বুঝবেন সেটা নিয়ে গুগুল এ সার্চ দিবেন তারপর ও না বুঝলে আমাদের জানাবেন ।
এইচটিএমএল এর প্রতিটি এলিমেন্ট ব্রাউজারকে এক একটা নির্দেশনা দেয় যে তার ভিতরে থাকা কনটেন্টকে কিভাবে প্রদর্শন করবে। যেমন <hr/> এলিমেন্ট ব্রাউজারকে বলে একটা আড়াআড়ি লাইন দেখাও।
আবার <h1></h1> বলে একটা বড় ফন্টের শিরোনাম তৈরী কর ইত্যাদি।
অনেক এলিমেন্ট আছে যারা ব্রাউজারকে যেটা বলে সেটার সাথে আরো নতুন কিছু যোগ করে দেয়া যায়। এই যে একটা এলিমেন্টে নতুন তথ্য যোগ করলেন এটাকে সেই এলিমেন্টের এট্রিবিউট বলে।
স্টাইল অ্যাট্রিবিউট
h1 এলিমেন্ট যখন ব্রাউজারকে বড় ফন্টের শিরোনাম প্রদর্শন করতে বলবে তখন এট্রিবিউট দিয়ে সেই শিরোনামটির রং কি হবে তাও বলে দিতে পারেন। যেমন
1.<h1 style="color:darkblue;">HTML Attribute tutorial</h1>
আউটপুট দেখুন
HTML Attribute tutorial
এখানে "style" হচ্ছে একটা এট্রিবিউট এবং "color:darkblue;" হচ্ছে এট্রিবিউটটির মান। যদি এট্রিবিউটটি ব্যবহার না করেন তাহলে কিন্তু শিরোনামটির রং পরিবর্তন হতনা বাই ডিফল্ট কালো থাকতো।অধিকাংশ ট্যাগেই এরুপ অনেক ধরনের এট্রিবিউট যোগ করা যায়।
** এট্রিবিউট লেখার নিয়ম হচ্ছে প্রথমে এট্রিবিউটটির নাম এরপর সমান চিহ্ন (=) দিয়ে কোটেশনের ("" বা '') ভিতর এর মান।
(সব ছোট হাতের অক্ষরে) মুলত ৩ ধরনের এট্রিবিউট গ্রপ আছে যেগুলি একটা এলিমেন্টে থাকতে পারে। এর মধ্যে কোর এট্রিবিউট (core attribute) এর ব্যবহার সবচেয়ে বেশি দেখবেন।
id, class, title, style হল কোর এট্রিবিউট। এই এট্রিবিউটগুলিকে গ্লোবাল এট্রিবিউট বলা হয়।
HTML 5 এ বেশকিছু নতুন এট্রিবিউট এসেছে যেমন contenteditable, contextmenu, draggable, dropzone ইত্যাদি নিয়ে পরে বিস্তারিত আলোচনা হবে। এখানে মনে রাখুন গ্লোবাল এট্রিবিউট কয়েকটি HTML এলিমেন্ট ছাড়া সব এলিমেন্টে ব্যবহার করা হয় বা যায়।
ইন্টারন্যাশলাইজেশান এট্রিবিউট হচ্ছে dir, lang এগুলি এবং UI event এট্রিবিউট আছে যেমন onclick, ondoubleclick, onmouseout, onkeypress ইত্যাদি। এগুলিকে ইভেন্ট এট্রিবিউট বলা হয়।
**তবে একটা জিনিস মনে রাখুন যে ইভেন্ট এট্রিবিউটগুলি শুধু জাভাস্ক্রিপ্ট এর কাজ এর জন্য ব্যবহৃত হয়।
id, class দিয়ে এলিমেন্টের নাম দেয়া যায় পরে সেই নাম ধরে সিএসএস স্টাইলিং করা হয়। এগুলি সিএসএস টিউটোরিয়ালে আছে।
সাইজ অ্যাট্রিবিউট
এইচটিএমএল এর ইমেজ ট্যাগ টি ডিফাইন করতে হয় <img>এভাবে , এটার ভিতরের ফাইল নেম বা Source এবং সাইজ এগুলা সব কিছুই অ্যাট্রিবিউট ।
যেমনঃ
<img src="example.jpg" width="104" height="142">
alt অ্যাট্রিবিউট
alt অ্যাট্রিবিউট টি ইউজ করা হয় যখন এইচটিএমএল ইউজ বা না পাওয়া যায় অর্থাৎ আপনি যখন ইমেজ ট্যাগ এ src দিয়ে আপনার ইমেজ এর লোকেশন বলে দেন ওই লোকেশন থেকে যদি কোন কারনে পিকচার টি না পাওয়া যায় তখন ইমেজ এর জাইগায় আপনার alt এ যা লিখে রাখবেন সেটা দেখাবে এটাই alt অ্যাট্রিবিউট ।
যেমনঃ
<img src="example.jpg" alt="bdwebdeveloper.blogspot.com" width="104" height="142">
এখানে alt এর মধে যা লিখা হয়েছে সেটাই alt এট্রিবিউট।টাইটেল অ্যাট্রিবিউট
title এট্রিবিউট কোন এলিমেন্টের দিলে এটা দিয়ে টুলটিপ আকারে তথ্য প্রদর্শন করা যায় যেমন
1.<h2 title="Hello BD Web Developer">Welcome To Our Web Development Tutorial</h2>Welcome To Our Web Development Tutorial
এর উপরে মাইস নিয়ে যান তাহলে "Hello BD Web Developer" লেখাটি টুলটিপ আকারে দেখতে পাবেন। style এট্রিবিউটতো প্রথম উদাহরনেই দেখালাম, এখানে শুধু রং পরিবর্তন করেছি আপনি চাইলে আর অনেক সিএসএস প্রোপার্টিজ ব্যবহার করতে পারেন।এছাড়া ও আরও কিছু এট্রিবিউট রয়েছে সেগুলি আমরা পরে আলোচনা করবো আজকের মত এখানেই শেষ করছি , ধন্যবাদ সবাইকে ।
0 comments:
Post a Comment