![[ব্যাসিক] ওয়েব ডিজাইনার হতে চান? আসুন আমাদের নিকট এবং বইটি পড়ুন। অধ্যায়-০৫- এইচটিএমএল এট্রিবিউট](https://trickbd.com/wp-content/uploads/2018/11/05/5be00fbc28ac3.jpg)
আসসালামুআলাইকুম বন্ধুরা,
কেমন আছেন আপনারা আশা করি ভালোই আছেন। আমিও আল্লাহর রহমতে ভালো আছি। তো আমি ইনাদ ইসলাম আবারো হাজির হলাম এই ওয়েব ডিজাইন বইটির পঞ্চম অধ্যায় নিয়ে। তো আমরা সবাই রেডি তো নতুন অধ্যায় পড়ার জন্যে? তাহলে চলুন শুরু করা যাকঃ-
তো আজ আমরা পড়ব এইচটিএমএল এট্রিবিউট নিয়ে। তো প্রথমেই প্রশ্ন জাগে যে, এইচটিএমএল এট্রিবউট? এইচটিএমএল এট্রবিউট এইচটিএমএল এলিমেন্ট সম্পর্কে তথ্য দেয়। আমরা এইচটিএমএল এর কিছু বৈশিষ্ট্য প্রথমে দেখে নেইঃ-
- প্রত্যেকজন এইচটিএমএল এলিমেন্ট এর একটি এইচটিএমএল এট্রিবিউট থাকবেই।
- এট্রিবিঊট সবসময় Start Tag এর ভিতরে থাকে।
- এট্রিবিউট এইচটিএমএল এলিমেন্ট সম্পর্কে তথ্য প্রদান করে
এইচটিএমএল এট্রিবিউট
একটি প্রয়োজনীয় এট্রিবিউট “href”
এই এট্রিবিঊট টি একটি বিশেষ ট্যাগ এর সাথে ব্যবহার করা হয় আপনারা কী জানেন ট্যাগ টা কী? জানলে অবশ্যই কমেন্টে জানান। আমি জানি সবাই যানে কারণ সবাই ট্রিকবিডিতে পোস্ট করে আর পোস্ট এ কোন লিংক দিতে হলে এই এট্রিবিউট টি একটি ট্যাগ এর সাথে ইউজ করতে হয় আর সেটি হলো <a>। এই ট্যাগ এর সাথে এট্রিবিউট টি ব্যবহার হয়। এবং এই এট্রিবিঊট টির মাঝে একটি লিংক দেয়া হয়ে থাকে যাতে করে আমরা যখন একটি লিংক বানাই এবং এই এট্রিবিউট এর ভিতরে কিছু দেই এবং এটার উপর ক্লিক করি তখন আমার দেয়া লিংকে আমাদের নিয়ে যাওয়া হয়।
Example
<a href= "https://trickbd.com"></a>
আরেকটি প্রয়োজনীয় এট্রিবিউট ” src”
এই এট্রিবিউট টিও একটি বিশেষ ট্যাগ এর সাথে ব্যবহার করা হয় আপনারা কি জানেন ট্যাগ টা কি? হ্যা আপনারা অবশ্যই যারা ট্রিখ বিডিতে পোস্ট করেন তারা জানেন। কারণ আপনারা যখন ট্রিকবিডিতে পোস্ট করেন তখন সবাই স্ক্রিনশট আপ করেন অনেকে আবার অন্য কোথাও আপলোড করে বা অন্য সার্ভার থেকে কোন পিক লোড করান। আর তখনই এই ট্যাগ এবং এট্রিবিউট টি ব্যবহার করা হয়। এখনও ধরতে পারেননি? সেটি হলো <img>। এই ট্যাগ টির Start Tag এর সাথে এই এট্রিবিঊট টি ব্যবহার করা হয় এবং এই এট্রিবিউট এর ডাবল কোটেশন(“”) এর ভিতর একটি ডিরেক্ট ইমেজ লিংক দেয়া থাকে। অথবা আপনার এইচটিএমএল ফাইল্টি যে ডিরেক্টরি তে আছে আপনার পিক টি যদি একই ডিরেক্টরি তে থাকে তবে এখানে শুধু ইমেজ এর নাম টি লিখা হয় ঠিক এমন করেঃ-
Example
<img src= "https://trickbd.com"></img>
‘alt’ এট্রিবিউট
এই এট্রিবিউট টিও উপরের <img> এর সাথে ব্যবহার করা হয়। এখন ভাবুন আপনি একটি ইমেজ অন্য সার্ভার থেকে এনে ট্রিকবিডির এক পোস্টের সাথে ইমেজ ট্যাগ এর মাধ্যমে পোস্ট করলেন। এখন কিছুদিন পর ওই সাইট বা সার্ভার ওই পিক টি ডিলিট করে দিলো। তখন আপনি যেই পিকটি লিংক করে শো করিয়েছিলেন সেটি দেখাবেনা। তাহলে কি দেখাবে? আপনি যদি এই অল্টার বা alt ট্যাগ টি ব্যবহার করেন তবে পিক্টির বদলে পিকের ইনফরমেশন শো করবে যা আপনি alt ট্যাগ এর কোটেশন এর ভিতর লিখে দিবেন ঠিক নিচের কোডটির মতঃ-
Example
<img src= "https://trickbd.com" alt="trickbd logo"></img>
‘Height’ & ‘Weight’ এট্রিবিউট
এই এট্রিবিউট টিও img ট্যাগ এর সাথে ব্যবহার করা হয়। এটি ব্যবহার করা হয় যাতে আপনার ইমেজটিকে একটি নির্দিষ্ট সাইজ দেয়া যায়। যেমন আমরা যখন একটি পোস্ট সাবমিট করতে যাই তখন ইয়া বড় একটা পোস্টার আমরা আপলোড দেই কিন্তু সেটি রিসাইজ করে অর্থাৎ এই দুটো এট্রিবিউট ব্যবহার করে এই পোস্টার গুলো কে ৬০×৬০ অর্থাৎ হাইট=৬০ এবং ওইডত=৬০ করে দেয়া হয় যার কারণে ভিওয়ারস এই ট্রিকবিডি এর হোম পেজ এ এত ছোট থাম্বনেইল দেখতে পায়। এটি image ট্যাগ এর সাথে কিছু টা এভাবে ব্যবহার করা হয়ঃ-
Example
<img src= "https://trickbd.com" height= "60" width="60"></img>
‘Style’ এট্রিবিউট
style এট্রিবিউট কোন নির্দিষ্ট কোন ট্যাগের সাথে নয় বরং এটি যেকোন ট্যাগের সাথেই বসতে পারে বা যেকোন ট্যাগ কে একটি স্টাইল করার জন্যেই এই ট্যাগ ব্যবহার করতে পারবেন। যেমন
Example
<p style= "color: red;">TrickBD.Com</p>
‘Lang’ এট্রিবিউট
আমরা চাইলেই বলে দিতে পারি যে আমরা আমাদের এইচটিএমএল ডকুমেন্ট টি কোন ভাষায় লিখেছি। আর এটি করতে হলে আমাদের ‘Lang’ এট্রিবিউট টির প্রয়োজন হবে। আর এই ‘Lang’ এট্রিবিউট টি ব্যবহার করা হয় <html> এই ট্যাগ টির সাথে। আর এই ট্যাগ টি সম্পর্কে আমরা ইতি পূর্বেই ধারণা পেয়ে এসেছি। তাই বেশি কিছু বলছিনা। আর এই ভাষা সেলেক্ট করে দেয়া একটি সাইটের জন্যে অনেক ভালো হয় এতে করে সার্চ ইঞ্জিন গুলোরো কষ্ট কম হয়। এবং একজন রিডার ও বুঝতে পারে কি ভাষায় এটি লিখা হয়েছে। এটি এভাবে লিখতে হয়ঃ-
Example
<!DOCTYPE html> <html lang= "en-US"> <head> <title<Example</title> </head> <body> .......</body> </html>
‘Title’ এট্রিবিউট
এটি Title ট্যাগ এর সাথে ব্যবহার হয়না। এটি একটি এট্রিবিউট যেটি টুলটিপ এর জন্যে কাজে লাগে। আমরা টুলটিপ সম্পর্কে পড়ে জানবো। এখন যখন আপনি একটি ট্যাগের সাথে Title এট্রিবিউট টি ব্যবহার করবেন এবং এট্রিবিউট এর ভিতরে কিছু লিখে দিবেন তার পর কোড টি রান করাবেন এবং সেই ট্যাগ এক্সিকিউট হয়ে রেজাল্ট দেখাবে সেই রেজাল্ট এর উপর যখন আপনি মাউস পয়েন্টার রাখবেন সেটি একটি লিখা শো করবে যা আপনি Title এট্রিবিঊট এ লিখে দিয়েছিলেন ঠিক এরকম ভাবেঃ-
Example
<p title= "trickbd.com">আমার উপর মাউস রাখুন টুলটিপ টি দেখা জন্যে</p>
কোটেশন
এইচটিএমএল এট্রবিউট এর জন্যে কোটেশন অনেক প্রয়োজনীয় এবং একটি আবশ্যক জিনিষ। এট্রিবিউট এর পরে অবশ্যই কোটেশন ব্যবহার করবেন। যেমনঃ-
এটা কখনই করবেন্না
<a href=Trickbd.com>Trickbd</a>
এভাবে লিখবেন
<a href= "https://trickbd.com">trickbd</a>
14 thoughts on "[ব্যাসিক] ওয়েব ডিজাইনার হতে চান? আসুন আমাদের নিকট এবং বইটি পড়ুন। অধ্যায়-০৫- এইচটিএমএল এট্রিবিউট"