HTML ট্যাগ একটি ওয়েব পৃষ্ঠায় একটি ছবি যোগ করে। আপনি যে চিত্রটি ঘুমাতে চান তার অবস্থান নির্দিষ্ট করতে src বৈশিষ্ট্যটি ব্যবহার করুন৷ alt অ্যাট্রিবিউটটি প্রায়শই একটি চিত্রের জায়গায় পাঠ্য প্রদর্শন করতে ব্যবহৃত হয় যদি চিত্রটি লোড করতে না পারে৷৷

যখন ওয়েব প্রথম উদ্ভাবিত হয়েছিল, ওয়েব পেজগুলি শুধুমাত্র পাঠ্য প্রদর্শন করতে পারত। যাইহোক, একটি ওয়েব পৃষ্ঠায় একটি ছবি যোগ করার ক্ষমতা দ্রুত যোগ করা হয়েছিল। তারপর থেকে, ছবিগুলি ওয়েবের বেশিরভাগ পৃষ্ঠাগুলির একটি গুরুত্বপূর্ণ অংশ হয়ে উঠেছে৷ লোগো থেকে ফটোগ্রাফ, ছবি ইন্টারনেটে সর্বত্র রয়েছে৷

এই টিউটোরিয়ালটি আলোচনা করবে কিভাবে ব্যবহার করতে হয় একটি ওয়েব ডেভেলপার হিসাবে HTML চিত্রের সাথে কাজ করার জন্য ট্যাগ করুন। এছাড়াও আমরা কয়েকটি প্রধান বৈশিষ্ট্য সম্পর্কে কথা বলব যা আপনি এর সাথে ব্যবহার করতে পারেন ট্যাগ।

HTML চিত্র ট্যাগ

HTML ট্যাগ একটি ওয়েব নথিতে একটি ছবি যোগ করে। আপনি যে ছবিটি এম্বেড করতে চান তার অবস্থান নির্দিষ্ট করতে src অ্যাট্রিবিউট ব্যবহার করুন। এটি আপনার কম্পিউটারের একটি ফাইল বা অন্য ফাইলের URL হতে পারে৷ Alt অ্যাট্রিবিউট আপনাকে বিকল্প টেক্সট নির্দিষ্ট করতে দেয় যা ইমেজ লোড করতে না পারলে প্রদর্শিত হয়।

এখানে HTML -এর সিনট্যাক্স রয়েছে ট্যাগ:

ট্যাগের কোন ক্লোজিং ট্যাগ নেই। পরিবর্তে, ট্যাগটি “/>” দিয়ে শেষ হয়। এটি বোঝায় যে ট্যাগের জন্য আলাদা ক্লোজিং ট্যাগের প্রয়োজন নেই। ট্যাগ সব ব্রাউজারে সমর্থিত।

এইচটিএমএল অনুমান করে যে ফোল্ডারটি আপনার এইচটিএমএল ফাইল সংরক্ষণ করছে সেই ফোল্ডারটি একই ফোল্ডার যা আপনি উল্লেখ করেন এমন কোনও চিত্র সংরক্ষণ করে। এই আচরণটি একটি সঠিক ফাইল পাথ বা URL উল্লেখ করে উপেক্ষা করা যেতে পারে যেখানে একটি ছবি পাওয়া যাবে।

উপরের সিনট্যাক্সে, আমাদের house.png. ফাইলটি উল্লেখ করবে এই ফাইলটি HTML ফাইলের মতো একই ফোল্ডারে রয়েছে যার সাথে আমরা কাজ করছি৷

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

যাইহোক, যদি আমরা আমাদের ইমেজ ফাইলগুলিকে অন্য ফোল্ডারে সংরক্ষণ করি-যাকে ছবি বলা হয়, উদাহরণস্বরূপ-আমরা এই কোডটি ব্যবহার করব:

যদি আমরা একটি বহিরাগত উত্স থেকে একটি ছবি এম্বেড করতে চাই, আমরা একটি পরম URL ব্যবহার করতে পারি। এখানে একটি এর একটি উদাহরণ ট্যাগ রেফারেন্সিং একটি বাহ্যিক চিত্র:

এটি বলেছে, যখনই সম্ভব স্থানীয় ফাইল থেকে একটি চিত্র উল্লেখ করা সাধারণত ভাল। এর কারণ হল একটি বাহ্যিক চিত্র উল্লেখ করা ব্রাউজারকে স্থানীয় ফাইল থেকে একটি চিত্র পুনরুদ্ধার করার চেয়ে বেশি কাজ করে৷

HTML চিত্রের উদাহরণ

আসুন HTML -এর একটি উদাহরণ অন্বেষণ করি কর্মে ট্যাগ. ধরুন আমরা একটি স্থানীয় কফি হাউস, দ্য গোল্ডেন রোস্টের জন্য একটি ওয়েবসাইট তৈরি করছি। গোল্ডেন রোস্ট তাদের হোমপেজে এক কাপ কফির একটি ছবি দেখতে চায়।

ওয়েব পেজে যোগ করার জন্য তারা আমাদের যে ফাইলটি দিয়েছে সেটিকে বলা হয় coffee.png। যে ফোল্ডারটি আমাদের এইচটিএমএল পৃষ্ঠা সংরক্ষণ করে সেটিও এই ছবিটি সংরক্ষণ করে। আমাদের সাইটে এই ছবিটি যুক্ত করতে, আমরা নিম্নলিখিত কোডটি ব্যবহার করতে পারি:

 
দ্য গোল্ডেন রোস্ট

আমাদের কোড ফিরে আসে:

আসুন আমাদের কোড ভাঙ্গা যাক। প্রথমে, আমরা একটি ব্যবহার করেছি ট্যাগ, যা আমাদের ওয়েব পৃষ্ঠার প্রধান উপাদান সংরক্ষণ করে। তারপর, আমরা একটি

ব্যবহার করেছি আমাদের পৃষ্ঠায় একটি শিরোনাম সংজ্ঞায়িত করতে ট্যাগ করুন। এই শিরোনামের পাঠ্যটি হল:গোল্ডেন রোস্ট।

পরের লাইনে, আমরা আমাদের কোডে একটি ইমেজ যোগ করার জন্য একটি img উপাদান ব্যবহার করেছি—যাকে বলা হয় coffee.png। এই ছবিটি আমাদের HTML ফাইলের মতো একই ফোল্ডারের মধ্যে রয়েছে। ফলস্বরূপ, আমাদের src বৈশিষ্ট্য ব্যবহার করে একটি ফোল্ডারে নির্দেশ করার দরকার নেই। আমরা শুধু ফাইলটির নাম উল্লেখ করেছি৷

৷

ইমেজ HTML:বিকল্প পাঠ্য

বিকল্প টেক্সট যোগ করা এইচটিএমএল-এ ছবির সাথে কাজ করার একটি গুরুত্বপূর্ণ অংশ। বিকল্প পাঠ্য, alt বৈশিষ্ট্য দ্বারা উপস্থাপিত , একটি চিত্রের একটি পাঠ্য বিবরণ৷

ইমেজ নিয়ে কাজ করার সময় আপনাকে একটি Alt অ্যাট্রিবিউট উল্লেখ করার অনেক কারণ রয়েছে। Alt text:

1. একটি অভিপ্রেত কিন্তু অস্তিত্বহীন চিত্রকে বর্ণনা করে . Alt টেক্সট উপযোগী যদি ইমেজটি খুঁজে পাওয়া না যায়—উদাহরণস্বরূপ, কারণ সেই ফাইলটি আপনার নির্দিষ্ট করা ফোল্ডারে বিদ্যমান নেই।
2. একটি অভিপ্রেত কিন্তু ধীরে-লোড হচ্ছে এমন চিত্রকে বর্ণনা করে . যদি ওয়েব পেজ ভিজিটরের একটি ধীর সংযোগ থাকে, তাহলে ছবিটি লোড হতে বিলম্ব হতে পারে।
3. অভিগম্যতা উন্নত করে . দর্শক যদি স্ক্রিন রিডার ব্যবহার করেন, তাহলে Alt টেক্সট থাকলে তারা ছবির বর্ণনা শুনতে পাবে।

Alt টেক্সট নিশ্চিত করে যে কোন কারণেই যদি একটি ছবি রেন্ডার করা না যায়, ওয়েব পৃষ্ঠাটি ব্যবহারকারীর কাছে কিছু পাঠ্য উপস্থাপন করবে। আপনি যদি অল্ট টেক্সট নির্দিষ্ট না করেন এবং একটি ছবি ভাঙা হয়, একটি ভাঙা ছবি আইকন প্রদর্শিত হবে৷

HTML বিকল্প পাঠের উদাহরণ

ধরুন আমরা উপরের কফি হাউসের উদাহরণে ইমেজে একটি Alt অ্যাট্রিবিউট যোগ করতে চাই। আমরা যে Alt টেক্সটটি নির্দিষ্ট করতে চাই তা হল রোস্টিং কফি, একটি হালকা বাদামী কাঠের টেবিলে কফি বিন দ্বারা বেষ্টিত৷ আমরা নিম্নলিখিত কোড ব্যবহার করে এই অল্ট টেক্সট যোগ করতে পারি:

 
দ্য গোল্ডেন রোস্ট
 

 এখন, ধরুন যে কেউ আমাদের coffe.png ফাইলটিকে অন্য ফোল্ডারে সরিয়ে দিয়েছে। ফলস্বরূপ, আমাদের ওয়েব পৃষ্ঠাটি আর ফাইলটি খুঁজে পাবে না। এর ফলে আমাদের অল্ট টেক্সট ওয়েব পেজে প্রদর্শিত হবে কারণ ছবিটি খুঁজে পাওয়া যাবে না। এই ক্ষেত্রে একজন দর্শক আমাদের ওয়েব পৃষ্ঠায় কী দেখতে পাবেন তার একটি উদাহরণ এখানে দেওয়া হল:
  

 আপনি যখন একটি Alt অ্যাট্রিবিউট যোগ করছেন, তখন এটি সংক্ষিপ্ত রাখার চেষ্টা করুন এবং চিত্রটি বর্ণনা করতে এটি ব্যবহার করুন। আমাদের কফি উদাহরণে, আমরা বর্ণনা করেছি কফির চিত্রটিতে কী রয়েছে। আমরা পৃষ্ঠায় ইতিমধ্যে থাকা পাঠ্যের পুনরাবৃত্তি করতে চাই না কারণ এটি ব্যবহারকারীদের জন্য বিভ্রান্তিকর হবে।
 
HTML চিত্র:শিরোনাম
 

 আপনি একটি চিত্র সম্পর্কে অতিরিক্ত তথ্য প্রদান করতে শিরোনাম বৈশিষ্ট্য ব্যবহার করতে পারেন। যখন ব্যবহার করা হয়, তখন শিরোনাম বৈশিষ্ট্যটি একটি টুলটিপ প্রদান করে যেটি প্রদর্শিত হয় যখন একজন ব্যবহারকারী মাউসের সাহায্যে একটি ছবির উপর ঘোরায়।
 

 আপনি যদি একটি ছবিতে একটি টুলটিপ যোগ করতে চান তাহলে শিরোনাম বৈশিষ্ট্যটি কার্যকর হতে পারে। যাইহোক, শিরোনাম বৈশিষ্ট্যটিতে স্ক্রিন রিডার সমর্থন নেই, এবং এটি মোবাইল ডিভাইসে দৃশ্যমান নয় (যার কোন মাউস নেই)।
 

 ধরুন আমরা একটি টেবিলে এক কাপ কফি মান সহ একটি শিরোনাম বৈশিষ্ট্য যোগ করতে চাই আগের থেকে আমাদের ইমেজ. আমরা এটি করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
 
 
দ্য গোল্ডেন রোস্ট
  

 যখন আমরা আমাদের কার্সার দিয়ে ইমেজের উপর হভার করি, তখন শিরোনাম ট্যাগের বিষয়বস্তু প্রদর্শিত হয়।
 
HTML চিত্রের আকার:প্রস্থ এবং উচ্চতা
 

 আপনি যথাক্রমে একটি ছবির প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে ছবির প্রস্থ এবং উচ্চতা বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন৷
 

 আমাদের কফি হাউস উদাহরণে ফিরে আসা যাক। ধরুন আমরা চাই আমাদের কফি ইমেজ 400 পিক্সেল চওড়া বা 400 পিক্সেল লম্বা হোক। আমরা এই ছবিটি ওয়েব পৃষ্ঠায় খুব বেশি স্থান নিতে চাই না। আমরা এই প্যারামিটারগুলি নির্দিষ্ট করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
 
 
দ্য গোল্ডেন রোস্ট
 

 আমাদের কোড ফিরে আসে:
  

 আপনি দেখতে পাচ্ছেন, এই উদাহরণে আমাদের চিত্রটি আগেরটির চেয়ে ছোট। আমাদের প্রথম উদাহরণে, আমাদের চিত্র ছিল 500×500। এখন, আমাদের চিত্র 400×400। কারণ আমরা উচ্চতা এবং প্রস্থ উভয় বৈশিষ্ট্য নির্দিষ্ট করেছি এবং প্রতিটিকে 400 এ সেট করেছি।
 
এইচটিএমএল ইমেজ:ইমেজ পজিশনিং
 

 আপনি যখন একটি চিত্র নিয়ে কাজ করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি এটি পৃষ্ঠার বাম বা ডানদিকে ভাসতে চান। ফ্লোট পৃষ্ঠায় চিত্রটির বাম বা ডানে অনুভূমিক প্রান্তিককরণকে বোঝায়। সেখানেই CSS ফ্লোট অ্যাট্রিবিউট আসে।
 

 ধরুন আমরা আগের থেকে আমাদের কফি ইমেজ পৃষ্ঠার ডান দিকে প্রদর্শিত করতে চাই. আমরা নিম্নলিখিত কোড ব্যবহার করে এটি ঘটতে পারি:
 
 
দ্য গোল্ডেন রোস্ট
 

 আমাদের কোড ফিরে আসে:
  

 আমরা float:right; ব্যবহার করেছি একটি শৈলী বৈশিষ্ট্য মধ্যে বৈশিষ্ট্য. এটি আমাদের নির্দিষ্ট করতে দেয় যে আমাদের ছবিটি আমাদের পৃষ্ঠার ডানদিকে ভাসতে হবে৷
৷ 
 
 
উপসংহার
 

 আপনি  ব্যবহার করতে পারেন একটি ওয়েব পৃষ্ঠায় একটি ছবি স্থাপন করার জন্য HTML ট্যাগ। ছবিগুলি একটি স্থানীয় ফাইল বা ফোল্ডার থেকে বা একটি বহিরাগত উত্স থেকে রেন্ডার করা যেতে পারে৷
৷ 

 এই টিউটোরিয়ালে আলোচনা করা হয়েছে কিভাবে  এর সাথে কাজ করতে হয় HTML এ ট্যাগ করুন। আমরা HTML  দ্বারা অফার করা কয়েকটি বৈশিষ্ট্য কীভাবে ব্যবহার করতে হয় সে সম্পর্কেও কথা বলেছি। ট্যাগ এখন আপনি একজন পেশাদারের মতো HTML-এ ছবি ব্যবহার শুরু করার জন্য প্রয়োজনীয় জ্ঞান দিয়ে সজ্জিত!
 

 আপনি কি HTML সম্পর্কে আরও জানতে চান? বিশেষজ্ঞ টিপস এবং অনলাইন কোর্স এবং শেখার সংস্থানগুলির একটি তালিকার জন্য আমাদের HTML গাইড কীভাবে শিখবেন তা দেখুন৷