ইমেজেস – ফ্রি HTML ও CSS কোর্স – ক্লাস ৬

এইচটিএমএলে থাকা চিত্রগুলি হল ইনলাইন উপাদান যা অনুচ্ছেদের মধ্যে স্থাপন করা যায়। কোনও চিত্র যুক্ত করতে, চিত্রটির অবস্থান নির্দিষ্ট করতে src বৈশিষ্ট্যের সাথে <img> ট্যাগ ব্যবহার করুন।

<img src="https://i1.wp.com/www.careerhelpbd.com/wp-content/uploads/2020/10/HTMl-course.jpg?">

কোনও চিত্র লোড হওয়া শেষ হয়ে গেলে আপনি কোনও ইভেন্ট ট্রিগার করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।

<img src="https://i1.wp.com/www.careerhelpbd.com/wp-content/uploads/2020/10/HTMl-course.jpg?" onload="alert('image loaded')">

চিত্রটির আকার পরিবর্তন height এবং width বৈশিষ্ট্যগুলি ব্যবহার করে বা বিকল্পভাবে সিএসএস ব্যবহার করে করা যেতে পারে:

<img src="https://i1.wp.com/www.careerhelpbd.com/wp-content/uploads/2020/10/HTMl-course.jpg?w=1200&ssl=1" width="100">

<img src="https://i1.wp.com/www.careerhelpbd.com/wp-content/uploads/2020/10/HTMl-course.jpg" style="width: 100px">

চিত্রের জন্য একটি “Alt” বৈশিষ্ট্য সেট থাকা যখন কোনও চিত্র লোড করতে না পারে বা আপনি কোনও টুলটিপস যুক্ত করতে চান যখন কোনও চিত্রের উপরের দিকে হভার(hover) করার সময় প্রদর্শিত হবে।

<img src="https://i1.wp.com/www.careerhelpbd.com/wp-content/uploads/2020/10/HTMl-course.jpg" style="width: 100px" alt="A pic of of this HTML course">

ইমেজের প্রকারভেদ:

তিনটি প্রধান ধরণের ইমেজের ফর্ম্যাট রয়েছে যা আপনার ব্যবহার করা উচিত।

  • লসলেস ফর্ম্যাট(Lossless formats) – যখন আপনার পিক্সেল-নিখুঁত গ্রাফিক্সের প্রয়োজন হয়, উদাহরণস্বরূপ লোগোর জন্য। সর্বাধিক সাধারণ ফর্ম্যাটটি হল PNG। PNG আলফা স্বচ্ছতাও সমর্থন করে যার অর্থ আপনি যে কোনও ব্যাকগ্রাউন্ড ব্যবহার করতে পারেন এবং সেই ব্যাকগ্রাউন্ডের উপরে থাকা চিত্রটি ওভারলে করতে পারেন।
  • Lossy format – সমৃদ্ধ চিত্র প্রদর্শনের জন্য দরকারী। PNG এর মতো একটি ক্ষতিবিহীন ফর্ম্যাট যদি এই জাতীয় চিত্রগুলিতে ব্যবহার করা হয় তবে বৃহত্তর আকারের জায়গার প্রয়োজন হবে। এই বিভাগে ব্যবহৃত সবচেয়ে সাধারণ ফর্ম্যাটটি হল JPG।
  • অ্যানিমেটেড ফর্ম্যাট – সংক্ষিপ্ত অ্যানিমেটেড চিত্রগুলি দেখানোর জন্য দরকারী। সর্বাধিক সাধারণ ফর্ম্যাটটি হল GIF, যদিও এটি অনেক পুরানো তবে বহুল সমর্থনযোগ্য ফর্ম্যাট, অনেকগুলি সহজাত ত্রুটি যেমন প্রতিটি ফ্রেমের 256 রঙের সীমা এবং খারাপ সংকোচনের সাথে।

চিত্রে সিএসএস ফ্লোট অ্যাট্রিবিউট ব্যবহার করা

চিত্রগুলি নিকটবর্তী অনুচেছদের পাশে ফ্লোট করা যেতে পারে যাতে তারা পাঠ্যের আরও ভাল মিশ্রণ করতে পারে। clear সিএসএস অ্যাট্রিবিউট ব্যবহারের দিকে লক্ষ্য করুন – যা ব্রাউজারকে প্রথম অনুচ্ছেদের পরে float এর প্রভাবটি ভাঙ্গতে নির্দেশ করে।

<img src="https://i1.wp.com/www.careerhelpbd.com/wp-content/uploads/2020/10/HTMl-course.jpg" style="float: left; width:50%;">

<p>এইচটিএমএলে থাকা চিত্রগুলি হল ইনলাইন উপাদান যা অনুচ্ছেদের মধ্যে স্থাপন করা যায়। কোনও চিত্র যুক্ত করতে, চিত্রটির অবস্থান নির্দিষ্ট করতে src বৈশিষ্ট্যের সাথে <img> ট্যাগ ব্যবহার করুন।</p>

<p class="clear: both">Second paragraph</p>

Leave a Comment