আজকে যে কোনও ওয়েব পেজটি দেখুন এবং আপনি লক্ষ্য করবেন যে তারা সাধারণ কিছু জিনিস ভাগ করে নিয়েছে। ঐসব বৈশিষ্ট্যগুলির মধ্যে একটি হল চিত্র। ডান ইমেজ একটি ওয়েবসাইট এর উপস্থাপনা এত তাই যোগ। কিছু ছবি, যেমন একটি কোম্পানির লোগো, সাইটটি ব্র্যান্ডে সহায়তা করে এবং ডিজিটাল সত্তা আপনার শারীরিক কোম্পানীকে সংযুক্ত করে।
একটি ছবি, আইকন, বা আপনার ওয়েব পেজ গ্রাফিক্স যোগ করার জন্য, আপনি একটি পৃষ্ঠার HTML কোড ট্যাগ ব্যবহার করতে হবে। আপনি আপনার এইচটিএমএল এ IMG ট্যাগটি ঠিক জায়গায় রাখেন যেখানে আপনি গ্রাফিক প্রদর্শন করতে চান। ওয়েব ব্রাউজার যা পৃষ্ঠার কোড রেন্ডার করছে পৃষ্ঠাটিকে দেখানো হলে এই গ্রাফিকটি সঠিক গ্রাফিকের সাথে প্রতিস্থাপিত হবে। আমাদের কোম্পানির লোগোর উদাহরণে ফিরে যাওয়া, এখানে আপনি আপনার ছবিতে সেই ছবিটি যোগ করতে পারেন:
চিত্র বৈশিষ্ট্য
উপরের এইচটিএমএল কোডটি দেখলে আপনি দেখতে পাবেন যে এই উপাদানটি দুটি বৈশিষ্ট্য অন্তর্ভুক্ত করে। তাদের প্রতিটি ইমেজ জন্য প্রয়োজন।
প্রথম বৈশিষ্ট্য হল "src"। এই বেশ আক্ষরিক ইমেজ ফাইল যা আপনি পৃষ্ঠাতে প্রদর্শিত করতে চান। আমাদের উদাহরণে আমরা "logo.png" নামে একটি ফাইল ব্যবহার করছি। এটি গ্রাফিক যে ওয়েব ব্রাউজার প্রদর্শন করা হবে যখন এটি সাইট রেন্ডার।
আপনি এই ফাইলের নাম আগে যে বিজ্ঞপ্তি পাবেন, আমরা কিছু অতিরিক্ত তথ্য যোগ, "/ ছবি /"। এটি ফাইল পাথ। প্রারম্ভিক ফরোয়ার্ড স্ল্যাশ সার্ভারকে ডিরেক্টরের রুটের দিকে নজর দিতে বলে। এটি পরে "ইমেজ" নামে একটি ফোল্ডার খুঁজতে হবে এবং পরিশেষে "logo.png" নামক ফাইলটি দেখাবে। সব সাইটের সাইটের গ্রাফিক্স সংরক্ষণ করার জন্য "ইমেজ" নামে একটি ফোল্ডার ব্যবহার করা খুবই সাধারণ অভ্যাস, তবে আপনার ফাইলটি আপনার সাইটের জন্য প্রাসঙ্গিক যা পরিবর্তন করা হবে তা পরিবর্তন করা হবে।
দ্বিতীয় প্রয়োজনীয় বৈশিষ্ট্য হল "Alt" টেক্সট। এটি "বিকল্প পাঠ্য" যা দেখানো হয়েছে যদি ছবিটি কোন কারনে লোড হতে ব্যর্থ হয়। এই পাঠ্যটি, যা আমাদের উদাহরণে "কোম্পানি লোগো" পড়তে পারে যদি চিত্র লোড হতে ব্যর্থ হয়। কেন যে ঘটবে? বিভিন্ন কারণে:
- ভুল ফাইল পাথ
- ভুল ফাইলের নাম বা ভুল বানান
- ট্রান্সমিশন ত্রুটি
- সার্ভার থেকে ফাইল মুছে ফেলা হয়েছে
কেন আমাদের নির্দিষ্ট ইমেজ অনুপস্থিত হতে পারে জন্য এই মাত্র কয়েক সম্ভাবনার হয়। এই ক্ষেত্রে, আমাদের Alt পাঠ্য পরিবর্তে প্রদর্শন করবে।
স্বচ্ছ পাঠ্যটি স্ক্রিন রিডার সফ্টওয়্যার দ্বারা ব্যবহার করা হয় যাতে দর্শকের কাছে ছবিটি "পড়তে" হয় যা দৃষ্টিহীন হয়ে পড়ে। যেহেতু তারা আমাদের মত ছবিটি দেখতে পাচ্ছে না, তাই এই পাঠ্যটি তাদেরকে কীভাবে চিত্রটি দেখায় তা জানাতে দেয়। এটি কেন Alt টেক্সট প্রয়োজন এবং এটি পরিষ্কারভাবে ছবিটি কীভাবে প্রকাশ করা উচিত!
Alt পাঠ্যের একটি সাধারণ ভুল বোঝাবুঝি হচ্ছে এটি অনুসন্ধান ইঞ্জিনের উদ্দেশ্যগুলির জন্য। এটা সত্য নয়। যদিও গুগল এবং অন্যান্য সার্চ ইঞ্জিনগুলি এই টেক্সটটি কি ইমেজটি নির্ধারণ করে তা মনে করে (মনে রাখবেন, তারা আপনার ছবিটি "দেখতে" নাও পারে), আপনাকে সার্চ ইঞ্জিনে সম্পূর্ণরূপে আপীল করার জন্য alt টেক্সট লিখতে হবে না। লেখক স্পষ্ট Alt পাঠ্য যে মানুষের জন্য বোঝানো হয়। আপনি সার্চ ইঞ্জিনে আপগ্রেড করার জন্য ট্যাগের মধ্যে কিছু কীওয়ার্ড যুক্ত করতে পারেন, তবে এটি ঠিক আছে, তবে সর্বদা নিশ্চিত থাকুন যে Alt টেক্সটটি তার প্রাথমিক উদ্দেশ্যটি পেশ করছে কিনা তা চিত্রের যেকোনো ব্যক্তির জন্য যে গ্রাফিক্স ফাইলটি দেখতে পারে না।
অন্যান্য গুণাবলী
আইএমজি ট্যাগের আরো দুটি বৈশিষ্ট্য রয়েছে যা আপনি আপনার ওয়েব পৃষ্ঠায় একটি গ্রাফিক তৈরি করার সময় ব্যবহার করতে পারেন - প্রস্থ এবং উচ্চতা উদাহরণস্বরূপ, যদি আপনি ড্রিমওয়েভারের মতো WYSIWYG সম্পাদক ব্যবহার করেন, এটি স্বয়ংক্রিয়ভাবে আপনার জন্য এই তথ্য যোগ করে। এখানে একটি উদাহরণ:
WIDTH এবং HEIGHT বৈশিষ্ট্যাবলী ব্রাউজারটিকে ইমেজের আকার বলে। ব্রাউজারটি তারপর লেআউটটি কতটা স্থান বরাদ্দ করতে পারে তা ঠিক জানে এবং ছবিটি ডাউনলোড করার সময় এটি পরবর্তী উপাদানটিতে স্থানান্তর করতে পারে। আপনার এইচটিএমএল এই তথ্য ব্যবহার করে সমস্যা হল যে আপনি সবসময় আপনার ইমেজ যে সঠিক আকার প্রদর্শন করতে চান না হতে পারে উদাহরণস্বরূপ, যদি আপনার কোনও প্রতিক্রিয়াশীল ওয়েবসাইট থাকে যেখানে দর্শকরা স্ক্রিন ও ডিভাইসের আকারের উপর ভিত্তি করে পাল্টে যায় তবে আপনি আপনার ছবিগুলি নমনীয় হতে চান যদি আপনি আপনার এইচটিএমএল-এ স্থির আকারের কথা বলে থাকেন, তাহলে আপনি প্রতিক্রিয়াশীল সিএসএস মিডিয়া ক্যোয়ারীর সাথে ওভাররাইড করতে খুব কঠিন পাবেন। এই কারণে, এবং শৈলী (CSS) এবং গঠন (এইচটিএমএল) পৃথকীকরণ বজায় রাখার জন্য এটি সুপারিশ করা হয় যে আপনি আপনার এইচটিএমএল কোডে প্রস্থ এবং উচ্চতা বৈশিষ্ট্য যোগ করবেন না।
এক নোট: যদি আপনি এই সিমিং নির্দেশাবলী বন্ধ করে দেন এবং সিএসএসের আকার নির্দিষ্ট করেন না, তবে ব্রাউজারটি ইমেজটি তার ডিফল্ট, নেটিভ আকারের আকারে দেখাবে।
জেরেমি গিয়ার্ড দ্বারা সম্পাদিত