HTML এ সবচেয়ে গুরুত্বপূর্ণ উপাদানগুলির একটি হলো image Tag. Image শুধুমাত্র ওয়েবসাইটের look বা experience উন্নত করে না, বরং বিষয়বস্তু আরও পরিষ্কার এবং আকর্ষণীয় করতে সাহায্য করে। HTML এ ছবি যোগ করার জন্য img ট্যাগ ব্যবহার করা হয়।
এই ব্লগে আমরা HTML এ ছবি যোগ করার পদ্ধতি, img ট্যাগের ব্যবহারের নিয়ম, এবং ছবির সাথে সম্পর্কিত বিভিন্ন Attributes নিয়ে আলোচনা করব।
Table of Contents
HTML এ কিভাবে ছবি add করবো ?
HTML এ ছবি যোগ করতে img ট্যাগ ব্যবহৃত হয়। এটি একটি self-closing tag, অর্থাৎ এই ট্যাগটির শেষে কোনো বন্ধ করার ট্যাগ থাকে না। img ট্যাগের মাধ্যমে ছবি প্রদর্শনের জন্য source নির্ধারণ করতে হয়, যা src Attribute দ্বারা প্রদান করা হয়।
Syntax of img tag
<img src="image.jpg" alt="this is an image">উপরে একটি সাধারণ উদাহরণ দেওয়া হয়েছে যেখানে src Attribute এর মাধ্যমে ছবির source নির্ধারণ করা হয়েছে, এবং alt Attribute এর মাধ্যমে ছবির বিকল্প টেক্সট প্রদান করা হয়েছে।
image ট্যাগের important attributes
src Attribute
src (source) Attribute ব্যবহার করে আমরা কোন ছবি প্রদর্শিত হবে তা নির্ধারণ করতে পারি। এটি ছবির ফাইলের লোকেশন বা URL নির্দেশ করে। ছবিটি আপনার কম্পিউটারের লোকাল ফোল্ডার থেকে হতে পারে, অথবা ইন্টারনেটে হোস্ট করা অন্য কোন জায়গা থেকেও হতে পারে।
syntax
<img src="images/photo.jpg">এখানে , src="images/photo.jpg" এর মাধ্যমে একটি লোকাল ফোল্ডার থেকে ছবিটি লোড করা হয়েছে।
alt Attribute
alt (alternative text) Attribute খুবই গুরুত্বপূর্ণ, বিশেষ করে সেই ক্ষেত্রে যখন ছবিটি লোড হতে ব্যর্থ হয়। এটি একটি বিকল্প টেক্সট প্রদর্শন করে। এছাড়াও, alt Attribute ওয়েবসাইটের অ্যাক্সেসিবিলিটি উন্নত করে, কারণ স্ক্রিন রিডার ব্যবহারকারীরা এই বিকল্প টেক্সট পড়ে জানতে পারে যে ছবিটি কীসের।
syntax
<img src="images/mountain.jpg" alt="image of mountain">যদি ছবিটি প্রদর্শিত না হয়, তাহলে “image of mountain” টেক্সটটি দেখানো হবে।
width এবং height Attribute
HTML এ ছবি যোগ করার সময়, ছবির আকার নির্ধারণ করতে আমরা width এবং height Attribute ব্যবহার করতে পারি। এর মাধ্যমে আমরা পিক্সেলের ভিত্তিতে ছবির আকার নির্ধারণ করতে পারি।
syntax
<img src="images/photo.jpg" alt="this is an random image" width="500" height="300">এখানে ছবির width 500 পিক্সেল এবং height 300 পিক্সেল নির্ধারণ করা হয়েছে।
title Attribute
title Attribute এর মাধ্যমে ছবির উপর হোভার করলে অতিরিক্ত তথ্য দেখা যায় । এটি ছবির জন্য টুলটিপ হিসেবে কাজ করে।
syntax
<img src="images/sunset.jpg" alt="sunset" title="a beautiful sunset">যখন user ছবিটির উপর মাউস নিয়ে যাবে, তখন “a beautiful sunset” টেক্সটটি টুলটিপ হিসেবে দেখানো হবে।
Responsive Images
আজকাল ওয়েবসাইট বিভিন্ন ধরণের ডিভাইসে দেখা হয়, যেমন ডেস্কটপ, ট্যাবলেট, মোবাইল ইত্যাদি। একারণে, ছবি রেসপনসিভ হওয়া খুবই গুরুত্বপূর্ণ। রেসপনসিভ ছবি যোগ করতে আমরা CSS এর সাহায্যে ছবি size নিয়ন্ত্রণ করতে পারি।
<img src="responsive.jpg" alt="Responsive Image" style="width: 100%;">এই উদাহরণে, style="width: 100%;" ব্যবহার করা হয়েছে, যার ফলে ছবিটি তার কন্টেইনারের পুরো width জুড়ে থাকবে এবং যে কোন স্ক্রিন সাইজ অনুযায়ী পরিবর্তিত হবে।
Some important points about image
- ওয়েবপেজের লোডিং স্পীড বাড়ানোর জন্য সবসময় ছবির আকার কমিয়ে রাখা উচিত। বড় সাইজের ছবি ওয়েবসাইটকে slow করে দিতে পারে।
- প্রতিটি ছবির জন্য alt টেক্সট ব্যবহার করুন, যাতে ছবিটি লোড না হলে বা অ্যাক্সেস করতে না পারলে , বিকল্প টেক্সট প্রদর্শিত হয়।
- ছবিকে রেসপনসিভ করার জন্য CSS বা HTML এর মাধ্যমে width এবং height ব্যবহার করে ডিজাইন করুন, যাতে সব ধরণের ডিভাইসে image টি সঠিকভাবে প্রদর্শিত হয়।
উপসংহার
HTML এ ছবি যোগ করে ওয়েবসাইটকে আরও আকর্ষণীয় করা যায়। img ট্যাগের সঠিক ব্যবহার, এবং src, alt, width, height, ও অন্যান্য Attribute এর মাধ্যমে আমরা ছবি যোগ করে ওয়েবপৃষ্ঠার গুণগত মান বৃদ্ধি করতে পারি। এছাড়া, ছবি যোগ করার সময় অ্যাক্সেসিবিলিটি এবং রেসপনসিভ ডিজাইনের বিষয়েও সচেতন থাকতে হবে।
একটি successful webpage তৈরির জন্য HTML এ ছবি ব্যবহারের কৌশলগুলি জানলে, আপনি আপনার ওয়েবসাইটকে আরও কার্যকর এবং user-friendlyকরতে পারবেন।
F.A.Q
HTML এ image tag define করা হয় ?
HTML এ image tag define করা হয় <img> ট্যাগ দ্বারা , যা ওয়েবপেজে ছবি প্রদর্শনের জন্য ব্যবহৃত হয়। এটি একটি self-closing tag এবং এর মধ্যে আপনি src Attribute ব্যবহার করে ছবির source দিতে পারেন।
HTML এ src Attribute এর ব্যবহার কী ?
src Attribute এর মাধ্যমে HTML-এ ছবির source নির্ধারণ করা হয়। এটি ফাইলের লোকেশন বা URL নির্দেশ করে, যা ব্রাউজার ছবিটি লোড করার জন্য ব্যবহার করে।
HTML এ alt Attribute এর গুরুত্ব কী ?
alt (alternative text) Attribute ছবির জন্য একটি বিকল্প টেক্সট , যা ছবিটি লোড না হলে প্রদর্শিত হয়। এটি ওয়েবসাইটের অ্যাক্সেসিবিলিটি উন্নত করে এবং SEO এর জন্যও গুরুত্বপূর্ণ।
HTML এ ছবির আকার কীভাবে নির্ধারণ করা হয় ?
HTML এ width এবং height Attribute ব্যবহার করে ছবির width এবং height নির্ধারণ করা যায়। এগুলি পিক্সেলের মাধ্যমে নির্ধারণ করা হয়,
যেমন: <img src=”image.jpg” width=”500″ height=”300″>
HTML এ একাধিক ছবি কীভাবে যোগ করা যায় ?
HTML এ একাধিক ছবি যোগ করতে আপনি প্রতিটি ছবির জন্য আলাদা <img> ট্যাগ ব্যবহার করতে পারেন।
উদাহরণ:
<img src="image1.jpg" alt="image 1">
<img src="image2.jpg" alt="image 2">ওয়েবসাইটে দ্রুত লোড হওয়ার জন্য HTML ছবি কীভাবে অপ্টিমাইজ করা যায় ?
ছবির আকার কমিয়ে এবং উপযুক্ত ফরম্যাট (JPEG, PNG) ব্যবহার করে ছবিকে অপ্টিমাইজ করা যায়।
HTML এ একটি ছবি link হিসেবে কীভাবে ব্যবহার করা যায় ?
HTML এ <a> ট্যাগের ভিতরে <img> ট্যাগ ব্যবহার করে একটি ছবি লিঙ্ক হিসেবে ব্যবহার করা যায় । উদাহরণ:
<a href="https://techinbengali.com">
<img src="logo.jpg" alt="Techinbengali logo">
</a>