এই অতি-দ্রুত টিউটোরিয়ালে, আপনি শিখবেন কিভাবে একটি সংক্ষিপ্ত বর্ণনা পাঠ্য (যেমন একটি টুলটিপ) প্রদর্শন করতে হয় যখন আপনার ব্যবহারকারীরা একটি উপাদানের উপর ঘোরাফেরা করেন, যেমন একটি চিত্র বা লিঙ্ক৷
কিভাবে টুলটিপ যোগ করতে কয়েক সেকেন্ড সময় লাগে আপনি কেবল HTML শিরোনাম বৈশিষ্ট্য ব্যবহার করুন:title .
হোভারে পাঠ্য প্রদর্শন করুন (উপাদানের উপর মাউস)
এখানে রুবিকস কিউবের একটি চিত্রের একটি মৌলিক উদাহরণ। এই ছবির উপর আপনার মাউস সরান এবং কয়েক সেকেন্ডের মধ্যে রুবিকস কিউব পপ আপ সম্পর্কে অতিরিক্ত তথ্য:
উপরের চিত্র উপাদানটির জন্য এখানে HTML মার্কআপ রয়েছে:
<img
src="url-to-image-file"
title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik."
alt="A Rubik’s Cube"
/>ধরুন আপনি একটি টুলটিপ দেখাতে চান যখন আপনার ব্যবহারকারীরা একটি লিঙ্ক/অ্যাঙ্কর উপাদানের উপর তাদের মাউস নিয়ে যান।
টুলটিপ প্রকাশ করতে এই লিঙ্কের উপর আপনার মাউস সরান
সাম্প্রতিক নিবন্ধগুলি
এবং HTML মার্কআপ:
<a href="https://techstacker.com" title="Link to TechStacker’s front page"
>Latest articles</a
>
এখানেই শেষ এটা পেতে ওখানে যাও. আপনি title যোগ করতে পারেন যে কোনো HTML উপাদানের বৈশিষ্ট্য।
কেন আপনার ব্যবহারকারীরা যখন কোন উপকারী উপাদানের উপর তাদের মাউস সরান তখন টেক্সট দেখাচ্ছে?
ধরা যাক আপনার কাছে এমন একটি উপাদান রয়েছে যা কিছু লোকের জন্য তার সরলতার কারণে বিভ্রান্তি সৃষ্টি করতে পারে। একটি উদাহরণ একটি আইকন হতে পারে. বেশিরভাগ মানুষ মুষ্টিমেয় আইকনের বেশি চিনতে পারে না, তবে পশ্চিমা বিশ্বে আক্ষরিক অর্থে হাজার হাজার ভিন্ন আইকন প্রদর্শনে রয়েছে।
শুধুমাত্র একটি আইকনে একটি শিরোনাম বৈশিষ্ট্য যোগ করার মাধ্যমে (যেমন একটি ছবির উপাদানের ভিতরে) লোকেদের কাছে আইকনের ফাংশনটির একটি স্পষ্ট বিবরণ পাওয়ার বিকল্প রয়েছে যেখানেই এটি আপনার UI-তে বিদ্যমান।
এখন আপনি নিজেই ভাবতে পারেন, কতজন লোক জানেন যে একটি উপাদানের উপর ঘোরাফেরা করলে মাঝে মাঝে অতিরিক্ত তথ্য প্রকাশ পায়?
এটি একটি মহান প্রশ্ন. উত্তর হল এটি আপনার লক্ষ্য দর্শকদের উপর নির্ভর করে। বেশিরভাগ প্রযুক্তি-সচেতন ব্যক্তিরা স্বজ্ঞাতভাবে জানেন যে ঘোরাঘুরি + 1-2 সেকেন্ড অপেক্ষা করা প্রায়শই বিষয় সম্পর্কে অতিরিক্ত তথ্য প্রকাশ করে।
তবে কী হবে যদি আপনার শ্রোতারা মূলত অ-প্রযুক্তি জ্ঞানী লোকেদের নিয়ে থাকে, অথবা সম্ভবত শুধুমাত্র এমন লোক যারা ওয়েবে খুব বেশি ব্রাউজ করেন না?
আচ্ছা, তাহলে আমার ডিফল্ট অ্যাকশন হল লুক রব্লেউস্কির সার্বজনীন পরামর্শ প্রয়োগ করা:
অবশ্যই সবসময় জয়ী হয়।
যদি একটি আইকন পরিষ্কার না হয়, বা অন্তত একটি উচ্চ শতাংশ লোকের কাছে পরিষ্কার না হয়, তাহলে আপনি হয় একটি ভাল আইকন তৈরি করুন বা একটি সংক্ষিপ্ত বিবরণের সাথে সেই আইকনটিকে যুক্ত করুন৷
যাইহোক, একটি শিরোনাম বৈশিষ্ট্য যোগ করা, এবং অবশ্যই, একটি ALT অ্যাট্রিবিউট (স্ক্রিন রিডারদের জন্য, দৃষ্টি প্রতিবন্ধীদের জন্য) শুধুমাত্র উর্ধ্বমুখী। আপনার সবকিছুতে এটি যোগ করার দরকার নেই, কিন্তু আপনি যদি সন্দেহের মধ্যে থাকেন তবে আপনি এটিও করতে পারেন।
একটি অতিরিক্ত বোনাস হিসাবে, অন্ততপক্ষে ALT বৈশিষ্ট্যগুলিও SEO এর উপর প্রভাব ফেলে, অন্তত পরোক্ষভাবে, কিন্তু সম্ভবত এছাড়াও সরাসরি।
কেমন করে? ঠিক আছে, ALT বিবরণটি অ্যাক্সেসিবিলিটি বিভাগের অধীনে পড়ে, যা Google কোন গোপন করেনি তারা কীভাবে আপনার ওয়েবসাইটের গুণমানকে মূল্যায়ন করে তার উপর প্রভাব ফেলে, যা আপনার SEO র্যাঙ্কিং ক্ষমতাকে প্রভাবিত করবে।
যতদূর শিরোনাম বৈশিষ্ট্য, এটি এ ব্যবহৃত প্রভাব এসইও, কিন্তু আমার সাম্প্রতিক গবেষণার উপর ভিত্তি করে, এটি এখনও আছে কিনা তা স্পষ্ট নয়। কিন্তু আবার, শিরোনাম বৈশিষ্ট্য ব্যবহার করার জন্য কোন স্পষ্ট নেতিবাচক দিক নেই, শুধুমাত্র আপসাইডস।
বিকল্প টুলটিপ পদ্ধতি
আপনার বিল্ট-ইন HTML টুলটিপ/টাইটেল অ্যাট্রিবিউটের আরও কাস্টম সংস্করণের প্রয়োজন হতে পারে। সেই ক্ষেত্রে, আপনি বিভিন্ন ব্যবহারের ক্ষেত্রে সময় এবং শৈলী টুলটিপ উভয়ের জন্য JavaScript এবং CSS ব্যবহার করতে পারেন। আমি সেই উপযোগী দক্ষতা কভার করব ভবিষ্যতের টিউটোরিয়ালে (এটি আমার লেখার তালিকায় আছে!)।
