জ্ঞানস্তর: মাধ্যমিক
কোনো একটা লম্বা নামকে সংক্ষিপ্ত করে লেখার দরকার হলো, এজন্য প্রত্যেকটা শব্দের প্রথম অক্ষরগুলো, মানে আদ্যক্ষর নিয়ে, আপনি সেই নামটা তৈরি করলেন, ইংরেজিতে যাকে বলে acronym। যেমন: Bangladesh Agricultural and Rural Development-কে সংক্ষেপে ডাকা হয় BARD বলে; এখানে BARD হলো পুরো নামটার সংক্ষিপ্ত রূপ। ধরা যাক, একটা লেখা লিখছেন, যেখানে বারবার আপনি BARD-ই বলে যাচ্ছেন। কিন্তু একজন পাঠক BARD-এর মানে তো নাও জানতে পারেন। তাই এসব ক্ষেত্রে HTML-এর সহজ একটা কৌশল কাজে লাগানো হয়: <abbr> ট্যাগটি। এর আগে ব্যবহার করা হতো <acronym> ট্যাগটি, যা এখন deprecated বা বাতিল করা হয়েছে।
এই কোডটা ব্যবহার করলে যখনই আপনি GDP কিংবা BARD লেখাটার উপরে মাউস আনবেন, একটু অপেক্ষা করলেই সেখানে একটা বাক্সে দেখাবে BARD-এর মানে, যা আপনি <abbr>-এর title-এ দিয়েছেন। কিন্তু পূর্বনির্ধারিত এই স্টাইলটি অনেকের পছন্দ নাও হতে পারে। সেজন্য নিচের এই CSSটুকু বসিয়ে নিয়ে আপনি আরো দৃষ্টিনন্দন করে নিতে পারেন HTML-এর নিজস্ব টুলটিপকেই। টুলটিপের জন্য অন্য কিছু আবিষ্কার না করে <abbr> ট্যাগ ব্যবহার করাটা Web Accessibility-ও নিশ্চিত করে।
কেমন লাগলো, আর কাজে লাগলো কিনা অবশ্যই জানাতে ভুলবেন না। আর, আরো আরো সিএসএস প্রোপার্টি যোগ করে নতুন নতুন কিছু পরীক্ষা-নিরীক্ষা চালান, একটু opacity প্রয়োগ করে দেখুন… নতুন কিছু বের করতে পারলেও আমাদের সাথে শেয়ার করুন।
– মঈনুল ইসলাম
🔗 mayeenulislam.github.io
মূলসূত্র: পোস্টটা লিখতে এর মূল তথ্য গ্রহণ করা হয়েছে একটি তৃতীয় পক্ষীয় টিউটোরিয়াল থেকে, যে লিংকটি বর্তমানে লভ্য নয়। তবে সেখানকার কোডগুলো ঝামেলা করে বলে তা সংশোধন ও পরিমার্জন করতে সহায়তা নেয়া হয়েছে সফ্টওয়্যার ইঞ্জিনিয়ার অমিত চৌধুরীর। কৃতজ্ঞতা তাই এঁদের প্রতি। মূল লেখাটি অনেক বছর আগে লেখা ছিলো, সেখানকার deprecated কোড সরিয়ে সাম্প্রতিক কোড যোগ করা হয়েছে।
