আচ্ছা আমরা কি শিখব ? সেটা একবার প্রিভিউ দেখে আসি ।
আসলে প্রথমেই প্রিভিউটা দিলাম , এতে শেখার মজা বেড়ে যাবে হাজার(n=1000) গুন ।আমার আজকের টিউটোরিয়াল টি "marquee tag" বিষয়ক । আমার বিশ্বাস , ব্যাপক মজা পাবেন :D। আপনারা অনেক সময় দেখেন বিভিন্ন পত্রিকার ওয়েবসাইট এর সংবাদ শিরোনাম ডান থেকে বামে ঘুরছে, হ্যাঁ সেটিই আজকে আমি দেখাব , কত সহজে কাজটি করা যায়। যারা ওয়েব ডেভলপমেন্ট পেশায় আছেন তারা বিষয় টি ভালই জানেন। তবে আজকে বিষয় টি নিয়ে বিস্তারিত লিখব।
প্রথমে আপনার নোটপ্যাডটি ওপেন করুন। শুরুতে পেজটিতে <html> ও শেষে </html> কোড লিখুন। এবার আপনার তৈরি পেজ টিকে marquee.html এই নামে সেভ করুন। অবশ্যই খেয়াল রাখবেন যাতে extension এ .txt এর বদলে .html থাকে।
এবার মূল আলোচনায় আসি।
যদি আপনি কো টেক্সট কে ডান থেকে বামে ঘুরাতে চান, তাহলে,
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>
এই কোডের direction এর মান চেঞ্জ করে আপনি বাম থেকে ডানেও টেক্সট ঘুরাতে পারবেন। শুধু left এর যায়গায় right দিতে হবে। নিজে চেষ্টা করুন!
যদি আপনি এর স্পিড বাড়াতে চান ,
<marquee behavior="scroll" direction="left" scrollamount="30">Your continuous scrollable text goes here</marquee>
scrollamount এর মান যত বেশি হবে টেক্সট তত জোড়ে ঘুরবে। এইখানে এটি 30.
আপনি যদি চান এই Text টি ওয়েবপেজের মধ্যে মধ্যেই বাউন্স করবে , তাহলে
<marquee behavior="alternate">Your bouncing text goes here</marquee>
behavior এর মান alternate দেয়ার কারনেই এটি বাউন্স করে।
নিজের ইচ্ছামত আপনারা এই টেক্সট কে উপর থেকে নিচে অথবা নিচ থে উপরেও মুভ করাতে পারবেন।
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>
উপরের কোডের মাধ্যমে যেকোন টেক্সট নিচ থেকে উপরে যাবে।
যদি জাম্পিং টেক্সট দেখতে চান , তাহলে,
<marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="500">Your continuous scroll text goes here</marquee>
কোন ছবি যদি move করাতে চান , তাহলে কাজ একই just ছবিটার সোর্স বলে দিতে হবে। যেমন ধরুন pics তার নাম যদি হয় nature এবং এর format যদি হয় .gif তাহলে, <marquee behavior="scroll" direction="left"><img src="nature.gif" alt="nature" /></marquee> আর হ্যাঁ আপনি এর width আর height ও ফিক্সড করে দিতে পারবেন।
পরিশেষে আপনাদের "marquee tag" এর কিছু Attributes নিয়ে সংখিপ্ত আলোচনা।
width | Sets the width of the marquee | scrollamount | How far to jump as it moves |
height | Sets the height of the marquee | loop | How many times it should loop |
direction | Sets the direction of the marquee | bgcolor | Sets the background color of the marquee |
behavior | Whether to slide, bounce, or scroll | hspace | Sets the amount of horizontal space around the marquee |
scrolldelay | How long the marquee should wait before each jump | vspace | Sets the amount of vertical space around the marquee |
A total code : At last!!
একই সাথে তিনটি ভিন্ন মানের স্পিডে চলাচল কারি টেক্সট করতে হলে,
<html>
<marquee behavior="scroll" direction="right" scrollamount="1">Tortoise</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Hare</marquee>
<marquee behavior="scroll" direction="right" scrollamount="20">Cheetah</marquee>
</html>
প্রথমে ত না শিখেই, প্রিভিউ দেখেছিলেন 😛
এইবার এতক্ষণ যা শিখলাম তা আবার দেখে আসি !!
কেমন লাগল আজকের টিউটোরিয়াল? আজকের টিউটোরিয়াল এর আগে অন্য একটি ব্লগে লিখেছিলাম। যেহেতু ব্যাপারটি খুব মজার ও গুরত্নপূর্ণ এবং কেউ যাতে মিস না করে, তাই এখানেও লিখলাম ইনশাআল্লাহ সামনে আরও ভালো টিউটোরিয়াল নিয়ে আসব। সে পর্যন্ত Good bye!!
আমি Systematic chaous। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 7 টি টিউন ও 24 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
Thanks for the Tune.
Kono chain image ke (anek gulo chhoto chhoto logo ) marquee korte gele ki vabe korte hobe ?
@বিপাশা: একই ভাবে, Just আপনাকে image এর সোর্স টা বলে দিতে হবে।
আপনি ইচ্ছা করলে width আর height ও Fixed করে দিতে পারেন।
পুরাই copy করা পোষ্ট!!!… ৩ তারিখে টিউনারপেজ এ; http://www.tunerpage.com/archives/124425
ভাই, copy – paste ট্রেডিশন বন্ধ করুন!!!… সৃজনশীল কিছু লিখুন…
@codehunter: হতাশ হওয়ার কিছু নাই!! ওইটাও আমি লিখছি!!
আপনি আজকের পোষ্টের নিচের এই লেখাটা পড়েন নাই !!
“আজকের টিউটোরিয়াল এর আগে অন্য একটি ব্লগে লিখেছিলাম। যেহেতু ব্যাপারটি খুব মজার ও গুরত্নপূর্ণ এবং কেউ যাতে মিস না করে, তাই এখানেও লিখলাম ইনশাআল্লাহ সামনে আরও ভালো টিউটোরিয়াল নিয়ে আসব। সে পর্যন্ত Good bye!!”
For better understanding the marquee HTML Tags is following:
Hi This is Bangladesh
# You can use any direction from four. [up/down/left/right]
# scrollamount=”2″ this numerical value consider as pixel
# scrolldelay=”85″ this numerical value declared in mili-second
# As behaviour use any from three. [alternate/scroll/slide]
@marahim:এইখানে সব কিছুই HTML এর নিজস্ব উপাদান। তবে হ্যাঁ আপনি ইচ্ছা করলে HTML এর পাশাপাশি CSS ও use করতে পারবেন !! যদি inline CSS use করতে চান তাহলে ….. এই ট্যাগ এর ভিতরে use করতে হবে।
ভালো হয়েছে। ধন্যবাদ আপনাকে।