Chapter 4 — Web Design & HTML

Image

ইমেজ

beginner#image#htmlUpdated: 2026-05-17

ইমেজ (Image)

১. ভূমিকা — একটা খবর কল্পনা করো

ভাবো prothomalo.com-এ একটা খবর — "পদ্মা সেতুতে প্রথম ট্রেন"। শুধু লেখা, কোনো ছবি নেই।

এবার ভাবো — একই খবর, সাথে সেতুর উপর দিয়ে ট্রেন যাওয়ার একটা ঝকঝকে ছবি।

কোনটা বেশি টানল? — অবশ্যই দ্বিতীয়টা।

একটা প্রবাদ আছে — "একটি ছবি হাজার শব্দের সমান"। Web Page-এ ছবি যোগ করে আমরা একে প্রাণবন্ত করি।

কিন্তু ছবি তো আলাদা একটা file — HTML লেখা file। তাহলে লেখার ভেতরে ছবি ঢুকবে কীভাবে?

২. সমস্যা — লেখার ভেতরে ছবি বসাব কীভাবে?

HTML file-এ থাকে শুধু text (অক্ষর)। কিন্তু একটা ছবি (photo.jpg) আলাদা একটা file — ছবির file।

তুমি তো HTML file-এর ভেতরে একটা পুরো ছবি কপি-পেস্ট করতে পারবে না!

আসল সমস্যা: HTML file-এর ভেতরে ছবিটাকে না রেখেই, browser-কে বলে দিতে হবে — "ওই জায়গায় এই ছবিটা দেখাও"।

সমাধান — <img> tag। এটি ছবি ধরে রাখে না, শুধু ছবির ঠিকানা (path) দেখিয়ে দেয়।

৩. চিত্রের মাধ্যমে বোঝো

<img> tag কীভাবে কাজ করে:

HTML file               ছবির file
┌─────────────┐        ┌──────────┐
│ <img        │        │          │
│  src="      │───────▶│ photo.jpg│
│  photo.jpg">│  খুঁজে │  (ছবি)   │
│             │  আনে   │          │
└─────────────┘        └──────────┘
       │
       ▼
  browser ছবিটা ওই জায়গায় বসিয়ে দেখায়

<img> শুধু একটা "পয়েন্টার" — সে বলে ছবি কোথায় আছে, browser গিয়ে এনে দেখায়।

৪. বাস্তব জীবনের সাথে মিল

অ্যালবামের সাথে তুলনা করো:

পুরনো ছবির অ্যালবামে ছবিগুলো কোণা দিয়ে আটকানো থাকে। অ্যালবামের পাতা নিজে ছবি নয় — শুধু ছবি ধরে রাখার জায়গা।

<img> tag হলো সেই কোণা — Web Page-এ ছবি বসানোর জায়গা। আসল ছবি আলাদা file-এ থাকে।

Module 1: সংজ্ঞা ও মূল কাঠামো

Image Tag কী?

<img> tag হলো HTML-এর একটি void (একক) tag যা Web Page-এ ছবি প্রদর্শন করে। এর কোনো closing tag নেই।

<img src="photo.jpg" alt="আমার ছবি" width="300" height="200">

<img> tag নিজে ছবি ধারণ করে না — এটি src attribute দিয়ে ছবির অবস্থান নির্দেশ করে।

Module 2: গুরুত্বপূর্ণ Attribute

Attributeকাজ
srcছবির path বা ঠিকানা (Source) — বাধ্যতামূলক
altছবি না দেখালে যে বিকল্প লেখা দেখাবে
widthছবির প্রস্থ
heightছবির উচ্চতা

src — Source (উৎস)

ছবির ঠিকানা। দুই ধরনের হতে পারে:

Relative path (একই Website-এর ভেতরে):
  <img src="photo.jpg">
  <img src="images/logo.png">

Absolute path (অন্য Website থেকে):
  <img src="https://example.com/pic.jpg">

alt — Alternative Text (বিকল্প লেখা)

ছবি load না হলে বা ধীর internet-এ যে লেখা দেখা যায়। এটি দৃষ্টিপ্রতিবন্ধীদের screen reader-ও পড়ে শোনায়।

<img src="padma.jpg" alt="পদ্মা সেতুর ছবি">

⚠️ alt সবসময় দিতে হবে — accessibility (সবার জন্য সহজ ব্যবহার) ও HSC পরীক্ষা — দুই কারণেই গুরুত্বপূর্ণ।

width ও height — আকার

pixel-এ বা শতাংশে (%) দেওয়া যায়।

<img src="pic.jpg" width="400" height="300">   ← pixel
<img src="pic.jpg" width="50%">                 ← শতাংশ

Module 3: Image Format — কোন ফরম্যাট কখন

ফরম্যাটবৈশিষ্ট্যকখন ব্যবহার
JPG / JPEGছোট file, লক্ষ লক্ষ রঙছবি, ফটোগ্রাফ
PNGস্বচ্ছ (transparent) background সম্ভবলোগো, আইকন
GIFচলমান (animation) সম্ভব, কম রঙছোট animation
WebPআধুনিক, ছোট file ও ভালো মানআধুনিক Website
ফটোগ্রাফ      → JPG     (file ছোট)
স্বচ্ছ লোগো    → PNG     (background ছাড়া)
ছোট animation → GIF

Module 4: ছবিকে Link বানানো

<img> tag-কে <a> (anchor) tag-এর ভেতরে রাখলে ছবিতে click করা যায় — ছবি একটি hyperlink হয়।

<a href="https://prothomalo.com">
  <img src="logo.png" alt="প্রথম আলো লোগো">
</a>

এখন logo ছবিটিতে click করলে prothomalo.com খুলবে। Website-এর logo সাধারণত এভাবেই Home Page-এর link হয়।

Module 5: figure ও figcaption — অর্থবহ ছবি

HTML5-এ ছবির সাথে ক্যাপশন (বর্ণনা) যুক্ত করতে <figure> ও <figcaption> ব্যবহার হয়:

<figure>
  <img src="padma.jpg" alt="পদ্মা সেতু">
  <figcaption>পদ্মা সেতু — বাংলাদেশের গর্ব</figcaption>
</figure>

<figure> ছবি ও তার বর্ণনাকে একটি অর্থবহ একক হিসেবে বাঁধে। <figcaption> ছবির নিচে ক্যাপশন দেখায়।

Module 6: ছবি না দেখালে কী হয়?

ছবি load না হওয়ার কারণ — ভুল path, file নেই, ধীর internet।

src ভুল হলে:
┌──────────────────┐
│ 🖼 পদ্মা সেতুর ছবি │  ← alt-এর লেখা দেখায়
└──────────────────┘

এই কারণেই alt জরুরি — ছবি ব্যর্থ হলেও user বোঝে সেখানে কী থাকার কথা ছিল।

Module 7: সাধারণ ভুল ও সতর্কতা

ভুল ১: alt attribute বাদ দেওয়া

alt ছাড়া ছবি ব্যর্থ হলে user কিছুই বোঝে না; screen reader-ও পড়তে পারে না। HSC-তে নম্বর কাটা যায়।

ভুল ২: ভুল src path দেওয়া

file-এর নাম, ফোল্ডার, এক্সটেনশন হুবহু মিলতে হবে। Photo.JPG ও photo.jpg ভিন্ন হতে পারে।

ভুল ৩: <img>-কে closing tag দেওয়া

<img> একটি void tag — </img> লেখার দরকার নেই।

ভুল ৪: শুধু width দিয়ে height না দেওয়া (বা উল্টো)

একটিমাত্র দিলে ছবি বিকৃত (stretched) হতে পারে। অনুপাত ঠিক রাখো।

Module 8: সুবিধা-অসুবিধা

বিষয়সুবিধাঅসুবিধা
ছবি যোগpage আকর্ষণীয় ও বোধগম্যpage ধীরে load হয়
বড় ছবিপরিষ্কার দেখায়file বড়, internet বেশি লাগে
alt textaccessibility ও SEO ভালোলিখতে বাড়তি শ্রম
PNGস্বচ্ছ backgroundfile বড় হয়

🔁 নিজে পরীক্ষা করো

MCQ:

১. Web Page-এ ছবি যোগ করে কোন tag?

  • ক) <image>
  • খ) <img> ✓
  • গ) <picture>
  • ঘ) <src>

২. ছবির path বা ঠিকানা দেয় কোন attribute?

  • ক) alt
  • খ) src ✓
  • গ) href
  • ঘ) width

৩. ছবি load না হলে যে বিকল্প লেখা দেখায় —

  • ক) src
  • খ) title
  • গ) alt ✓
  • ঘ) caption

৪. স্বচ্ছ (transparent) background-সহ লোগোর জন্য কোন ফরম্যাট ভালো?

  • ক) JPG
  • খ) PNG ✓
  • গ) GIF
  • ঘ) TXT

৫. <img> tag কোন ধরনের?

  • ক) Paired tag
  • খ) Void (unpaired) tag ✓
  • গ) Comment tag
  • ঘ) Container tag

সংক্ষিপ্ত প্রশ্ন:

৬. src ও alt attribute-এর কাজ আলাদা করে লেখো।

৭. একটি ছবিকে hyperlink বানানোর কোড লেখো।

📝 HSC পরীক্ষার প্রস্তুতি

১. <img> tag ও এর গুরুত্বপূর্ণ attribute-গুলো উদাহরণসহ ব্যাখ্যা করো।

২. alt attribute কেন গুরুত্বপূর্ণ? দুটি কারণ লেখো।

৩. একটি Web Page-এ স্কুলের logo যোগ করো যেটিতে click করলে স্কুলের Home Page খুলবে।

💡 পরীক্ষার টিপস: <img>-এ alt দিতে ভুলো না — পরীক্ষক প্রায়ই alt ছাড়া নম্বর কাটেন।

🎯 অনুশীলন প্রশ্ন

সহজ: একটি Web Page-এ তোমার একটি ছবি দেখাও — width ও height সহ।

মাঝারি: <figure> ও <figcaption> ব্যবহার করে একটি ছবি ও তার ক্যাপশন দেখাও।

কঠিন: একটি ফটো গ্যালারি পাতা বানাও — ৩টি ছবি পাশাপাশি, প্রতিটিতে click করলে বড় সংস্করণ খুলবে। সঠিক alt সহ লেখো।

✅ সারাংশ

🎯 মনে রেখো:

  • <img> = Web Page-এ ছবি দেখানোর void (একক) tag — closing tag নেই
  • <img> ছবি ধরে রাখে না, শুধু ছবির ঠিকানা দেখায়
  • src = ছবির path (বাধ্যতামূলক); alt = বিকল্প লেখা; width/height = আকার
  • alt সবসময় দাও — accessibility, ছবি-ব্যর্থতা ও পরীক্ষা — তিন কারণে
  • ফরম্যাট: JPG (ফটো), PNG (স্বচ্ছ লোগো), GIF (animation), WebP (আধুনিক)
  • <img>-কে <a>-এর ভেতরে রাখলে ছবি একটি hyperlink হয়
  • <figure> + <figcaption> → ছবির সাথে অর্থবহ ক্যাপশন
← PreviousForm