এইচটিএমএল ব্যবহার করে ওয়েব পেজ ইমেজ যোগ করা

ছবির গুণাবলী

উপরে এইচটিএমএল কোড খুঁজছেন, আপনি উপাদান দুটি গুণাবলী অন্তর্ভুক্ত দেখতে পাবেন। তাদের প্রতিটি ইমেজ জন্য প্রয়োজন বোধ করা হয়।

প্রথম বৈশিষ্ট্য হল "src"। এটি পুরোপুরি ইমেজ ফাইল যা আপনি পৃষ্ঠাতে প্রদর্শিত করতে চান। আমাদের উদাহরণে আমরা "logo.png" নামে একটি ফাইল ব্যবহার করছি। এটি এমন গ্রাফিক যা ওয়েব ব্রাউজারটিকে সাইটটি সরবরাহ করার সময় প্রদর্শন করবে।

এছাড়াও আপনি এই ফাইলের নামের আগে লক্ষ্য করবেন, আমরা কিছু অতিরিক্ত তথ্য যোগ করেছি, "/ images /"। এই ফাইল পাথ। প্রাথমিক ফরোয়ার্ড স্ল্যাশ ডিরেক্টরিটির রুট দেখতে সার্ভারকে বলে। এরপরে এটি "চিত্রগুলি" নামে একটি ফোল্ডার সন্ধান করবে এবং অবশেষে "logo.png" নামক ফাইলটি সন্ধান করবে। সাইটের সমস্ত গ্রাফিক্স সংরক্ষণ করতে "ইমেজ" নামে একটি ফোল্ডার ব্যবহার করা খুবই সাধারণ অভ্যাস, তবে আপনার ফাইলের পথটি আপনার সাইটের জন্য যেটা প্রাসঙ্গিক তা পরিবর্তন করা হবে।

দ্বিতীয় প্রয়োজনীয় বৈশিষ্ট্য হল "alt" পাঠ্য। এটি "বিকল্প পাঠ্য" যা দেখানো হয় যদি কোনও কারণে ছবিটি লোড হতে ব্যর্থ হয়। চিত্রটি লোড হতে ব্যর্থ হলে আমাদের লেখাটি "কোম্পানী লোগো" পড়তে পারে এমন পাঠ্যটি প্রদর্শিত হবে। কেন যে ঘটবে? বিভিন্ন কারণে:

• ভুল ফাইল পথ
• ভুল ফাইল নাম বা ভুল বানান
• ট্রান্সমিশন ত্রুটি
• ফাইল সার্ভার থেকে মুছে ফেলা হয়েছে

আমাদের নির্দিষ্ট চিত্র অনুপস্থিত হতে পারে কেন এই মাত্র কয়েক সম্ভাবনা আছে। এই ক্ষেত্রে, আমাদের Alt টেক্সট পরিবর্তে প্রদর্শিত হবে।

স্ক্রীন রিডার সফ্টওয়্যার দ্বারা Alt পাঠ্যটিও এমন দর্শককে চিত্রটি "পড়তে" ব্যবহার করে, যা দৃষ্টিভঙ্গীহীন। যেহেতু তারা আমাদের মতো চিত্রটি দেখতে পাচ্ছে না, তাই এই পাঠ্যটি তাদের চিত্রটি কী তা জানার জন্য দেয়। এ জন্যই আলটিমেট দরকার এবং কেন ছবিটি পরিষ্কারভাবে প্রকাশ করা উচিত!

Alt text এর একটি সাধারণ ভুল বোঝা এটি সার্চ ইঞ্জিন উদ্দেশ্যে বোঝানো হয়। এই সত্য নয়। যদিও Google এবং অন্যান্য সার্চ ইঞ্জিনগুলি কীভাবে চিত্রটি (মনে রাখবেন, তারা আপনার ছবিটিকে "দেখতে" নাও পারে) নির্ধারণ করতে এই পাঠটি পড়তে পারে তবে, আপনি কেবল অনুসন্ধান ইঞ্জিনগুলিতে আপিল করার জন্য Alt text লিখতে না পারেন। মানুষ মানুষের জন্য বোঝানো হয় যে লেখক পরিষ্কার Alt টেক্সট। আপনি যদি সার্চ ইঞ্জিনগুলিতে আপীল করার জন্য ট্যাগটিতে কিছু কীওয়ার্ড যুক্ত করতে পারেন তবে এটি ঠিক আছে তবে সর্বদা নিশ্চিত করুন যে চিত্রটি কীভাবে গ্রাফিক্স ফাইল দেখতে পারে না তার জন্য চিত্রটি কী বলে তা দিয়ে এটির প্রাথমিক উদ্দেশ্যটি সরবরাহ করছে।

অন্যান্য বৈশিষ্ট্য

দ্য IMG ট্যাগটিতে দুটি অন্যান্য বৈশিষ্ট্য রয়েছে যা আপনি যখন আপনার ওয়েব পৃষ্ঠায় গ্রাফিক লাগাতে ব্যবহার করেন তখন - প্রস্থ এবং উচ্চতা। উদাহরণস্বরূপ, আপনি যদি DreamWaver মত WYSIWYG এডিটর ব্যবহার করেন তবে এটি স্বয়ংক্রিয়ভাবে আপনার জন্য এই তথ্য যোগ করে। এখানে একটি উদাহরণ: