HTML-এ ট্যাগ ব্যবহার করে ওয়েবপেজে ছবি প্রদর্শন

 

HTML-এ <img> ট্যাগ ব্যবহার করে ওয়েবপেজে ছবি প্রদর্শন

HTML-এ ওয়েবপেজে ছবি প্রদর্শনের জন্য <img> ট্যাগ ব্যবহার করা হয়। এটি একটি স্বয়ং-সম্পূর্ণ ট্যাগ (self-closing tag), যার মানে এটির কোনো closing tag নেই।

<img> ট্যাগের মূল গঠন

<img> ট্যাগের মূল syntax হলো:

xml

<img src="image.jpg" alt="ছবির বিবরণ">

প্রধান Attributes

HTML img ট্যাগের বিভিন্ন attribute সমূহ

src Attribute (উৎস)

• এটি বাধ্যতামূলক attribute

• ছবির অবস্থান বা পাথ নির্দেশ করে

• দুই ধরনের URL ব্যবহার করা যায়:

  • Relative URL: src="photo.jpg"

  • Absolute URL: src="https://example.com/image.jpg"

alt Attribute (বিকল্প টেক্সট)

• এটিও বাধ্যতামূলক attribute

• ছবি লোড না হলে এই টেক্সট প্রদর্শিত হয়

• দৃষ্টি প্রতিবন্ধীদের জন্য সহায়ক

• সার্চ ইঞ্জিন অপ্টিমাইজেশনে গুরুত্বপূর্ণ

width Attribute (প্রস্থ)

• ঐচ্ছিক attribute

• ছবির প্রস্থ পিক্সেলে নির্ধারণ করে

• উদাহরণ: width="300"

height Attribute (উচ্চতা)

• ঐচ্ছিক attribute

• ছবির উচ্চতা পিক্সেলে নির্ধারণ করে

• উদাহরণ: height="200"

বিভিন্ন ব্যবহারের উদাহরণ

html_img_examples.csv

Generated File

১. সাধারণ ছবি প্রদর্শন

xml

<img src="photo.jpg" alt="ছবি">

২. নির্দিষ্ট আকার সহ

xml

<img src="logo.png" alt="লোগো" width="100" height="80">

৩. অনলাইন URL থেকে

xml

<img src="https://example.com/image.jpg" alt="অনলাইন ছবি" width="400" height="300">

গুরুত্বপূর্ণ বিষয়াবলী

Aspect Ratio বজায় রাখা

width এবং height ব্যবহার করার সময় ছবির aspect ratio (প্রস্থ ও উচ্চতার অনুপাত) বজায় রাখা উচিত। অন্যথায় ছবি বিকৃত হয়ে যেতে পারে।

Page Loading এর উন্নতি

width এবং height নির্দেশ করলে ব্রাউজার আগে থেকেই জায়গা সংরক্ষণ করে রাখে, ফলে পেজ লোডিং এর সময় কম flickering হয়।

ফাইল ফর্ম্যাট

HTML বিভিন্ন ছবির ফর্ম্যাট সাপোর্ট করে:

• JPEG: ফটোগ্রাফের জন্য উপযুক্ত

• PNG: স্বচ্ছতা (transparency) সহ ছবির জন্য

• GIF: অ্যানিমেশনের জন্য

• SVG: ভেক্টর গ্রাফিক্সের জন্য

অতিরিক্ত উন্নত Attributes

loading Attribute

xml

<img src="image.jpg" alt="ছবি" loading="lazy">

এটি ছবি lazy loading এর জন্য ব্যবহৃত হয়, যা পেজের গতি বাড়ায়।

title Attribute

xml

<img src="image.jpg" alt="ছবি" title="মাউস হোভার করলে দেখাবে">

মাউস হোভার করলে tooltip দেখায়।

CSS এর সাথে সমন্বয়

CSS ব্যবহার করেও ছবির আকার নিয়ন্ত্রণ করা যায়:

xml

<img src="image.jpg" alt="ছবি" style="width:300px; height:200px;">

তবে width এবং height attributes ব্যবহার করা CSS থেকে নিরাপদ কারণ CSS লোড না হলেও ছবির আকার সঠিক থাকে।

<img> ট্যাগ ওয়েব ডেভেলপমেন্টের একটি মৌলিক উপাদান যা সঠিকভাবে ব্যবহার করলে ওয়েবসাইটের visual appeal এবং user experience উল্লেখযোগ্যভাবে উন্নত হয়।

HTML-এ <img> ট্যাগ ব্যবহার করে ওয়েবপেজে ছবি প্রদর্শন

1. https://tutorial.techaltum.com/html-image.html

2. https://www.freecodecamp.org/news/img-html-image-tag-tutorial/

3. https://www.freecodecamp.org/news/how-to-work-with-images-in-html/

4. https://www.w3schools.com/html/html_images.asp

5. https://www.w3schools.com/tags/tag_img.asp

6. https://www.w3schools.com/tags/att_img_src.asp

7. https://www.homeandlearn.co.uk/WD/wds4p4.html

8. https://www.geekster.in/articles/html-image/

9. https://www.wufoo.com/html5/heightwidth-attributes/

10. https://www.geeksforgeeks.org/html/html-img-tag/

11. https://www.geeksforgeeks.org/html/how-to-show-images-on-click-using-html/

1. https://cloudinary.com/guides/image-effects/html-image-tag

2. https://www.hostinger.com/tutorials/how-to-add-image-or-logo-to-your-website

3. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images

4. https://ppl-ai-code-interpreter-files.s3.amazonaws.com/web/direct-files/3eb72d8cec4b2c5acbb7e244c7bbb2d2/76633521-ce87-46c8-ae42-60857a6122b9/4ae34cdf.csv

5. https://ppl-ai-code-interpreter-files.s3.amazonaws.com/web/direct-files/3eb72d8cec4b2c5acbb7e244c7bbb2d2/76633521-ce87-46c8-ae42-60857a6122b9/b5436006.csv