ইমেজ স্প্রাইটস্ বাটনের HTML স্ট্রাকচার এবং লিংক তৈরি-(২য় পর্ব)
ইতোমধ্যেই সিঙ্গেল ইমেজ তৈরির মাধ্যমে স্প্রাইটস্ বাটন তৈরির প্রথম ধাপ সম্পন্ন হয়েছে। এখন বাটন তৈরির জন্য এইচ টি এম এল স্ট্রাকচার এবং লিংক তৈরি করতে হবে। মূলত বাটনটি তৈরি করতে id="button" এর অনুরূপ আইডি সিলেক্টর যুক্ত এরকটা <div></div> ডিভ ট্যাগ ব্যবহার করা হয় এর মধ্যে <p></p>এর মাধ্যমে প্যারাগ্রাফ নিয়ে তার মধ্যে class="push" এর অনুরূপ ক্লাস সিলেক্টর যুক্ত এ্যংকর ট্যাগ <a href="#" class="push"></a> ব্যবহার করা হয়। href="#" এর মাধ্যমে লিংক তৈরি করা হয়।
বাটনের জন্য এইচটি এম এল স্ট্রাকচারটি হবে নিম্নরূপ।
<html>
<head>
<title>www.tutohost.com</title>
<style>
</style>
</head>
<body>
<div id="button">
<p>
<a href="#" class="push"></a>
</p>
</div>
</body>
</html>
স্প্রাইটস্ বাটন মূলত ইন্টারর্নাল অর্থাৎ ফোল্ডারের মাধ্যমে লিংক তৈরির জন্য ব্যবহৃত হয়। আর লিংকের আকৃতি হয় সাধারণত demo.html বা download/demo.zip এর অনুরূপ । অর্থাৎ সার্ভারে বা লোকাল কম্পিউটারে যেখানেই একটা ওয়েব সাইট ডেভলপ করা হোক না কেন, সাইটের জন্য তৈরিকৃত সকল এইচ টি এম এল, সি এস এস, পি এইচ পি, জাভাস্ক্রিপ্ট, ইমেজ ইত্যাদি ফাইল সমূহ কিছু ফোল্ডারের মধ্যে রাখা হয়। এক্ষেত্রে স্প্রাইটস্ বাটনে লিংক করার জন্য যেমন demo.html বা demo.zip যে ধরণের ফাইলই হোক না কেন ব্যবহার করা যাবে।
মনে করা যাক বাটনটি index.html পেজে আছে, বাটনের মাধ্যমে demo.html পেজের সাথে লিংক করতে হবে এবং index.html ও demo.html একই ফোল্ডারের মধ্যে আছে। তাহলে বাটনে লিংক করার জন্য <a href="#" class="push"></a> তে # এর স্থানে শুধুমাত্র demo.html অর্থাৎ <a href="demo.html" class="push"></a> লেখলেই চলে। কিন্তু মনে করা যাক site নামে একটা ফোল্ডারের মধ্যে বাটন যুক্ত index.html ফাইলটি আছে আর site ফোল্ডারের মধ্যে একটা download নামে ফোল্ডারের মধ্যে demo.zip ফাইলটি আছে। এক্ষেত্রে লিংক করতে হবে <a href=" download/demo.zip এর অনুরূপ" class="push"></a>
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত