Html Image Tag in Bengali | img tag - নিয়ে বিস্তারিত আলোচনা

Insert Image:

HTML এ একটি ছবি সন্নিবেশ করতে, আপনি <img> ট্যাগ ব্যবহার করতে পারেন। <img> ট্যাগ আছেএকটি src অ্যাট্রিবিউট যা ইমেজ ফাইলের উৎস (URL) নির্দিষ্ট করে। এখানে একটি উদাহরণঃ- 

<img src="image.jpg" alt="An example image">

উপরের উদাহরণে, src অ্যাট্রিবিউটটি "image.jpg" এ সেট করা হয়েছে, যা ইমেজ ফাইলের URL। alt অ্যাট্রিবিউটটি ছবির জন্য বিকল্প পাঠ্য প্রদান করতে ব্যবহৃত হয়, যা চিত্রটি লোড করা না গেলে বা অ্যাক্সেসযোগ্যতার উদ্দেশ্যে প্রদর্শিত হয়।

আপনি চিত্রের আকার, প্রান্তিককরণ এবং অন্যান্য বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করতে <img> ট্যাগের জন্য অতিরিক্ত বৈশিষ্ট্যগুলিও নির্দিষ্ট করতে পারেন। এখানে কিছু অতিরিক্ত বৈশিষ্ট্য সহ একটি উদাহরণঃ- 

<img src="image.jpg" alt="An example image" width="300" height="200" border="0" align="left">

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

মনে রাখবেন যে <img> ট্যাগটি একটি স্ব-ক্লোজিং ট্যাগ, যার অর্থ এটির জন্য ক্লোজিং ট্যাগের প্রয়োজন নেই। এটি খোলা এবং বন্ধ করার ট্যাগ জোড়ার প্রয়োজন ছাড়াই সরাসরি HTML মার্কআপের মধ্যে ব্যবহার করা যেতে পারে।

Set Image Location:

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

যাইহোক, আপনি ওয়েব সার্ভারে বা সর্বজনীনভাবে অ্যাক্সেসযোগ্য অনলাইন অবস্থানে অবস্থিত একটি চিত্র ফাইলের উত্স (URL) নির্দিষ্ট করতে পারেন। <img> ট্যাগের src বৈশিষ্ট্যটি নির্দিষ্ট করতে ব্যবহৃত হয়। 

<img src="https://example.com/images/image.jpg" alt="An example image">

উপরের উদাহরণে, "example.com" সার্ভারে হোস্ট করা ইমেজ ফাইলের URL-এ src অ্যাট্রিবিউট সেট করা আছে। ইমেজ ফাইলটি সার্ভার থেকে আনা হয় এবং ওয়েব ব্রাউজারে ওয়েব পেজ লোড করার সময় HTML নথিতে রেন্ডার করা হয়।

আপনি যদি একটি স্থানীয় ফাইল সিস্টেম থেকে একটি চিত্র অন্তর্ভুক্ত করতে চান, তাহলে আপনাকে একটি ওয়েব সার্ভার বা একটি ফাইল হোস্টিং পরিষেবাতে ছবিটি আপলোড করতে হবে এবং তারপরে <img> ট্যাগের src বৈশিষ্ট্যে আপলোড করা ছবির URL উল্লেখ করতে হবে উপরের উদাহরণে দেখানো হয়েছে।

Set Image Width/Height:

HTML-এ, আপনি <img> ট্যাগের প্রস্থ এবং উচ্চতা বৈশিষ্ট্যগুলি ব্যবহার করে একটি চিত্রের প্রস্থ এবং উচ্চতা সেট করতে পারেন। এখানে একটি উদাহরণঃ- 

<img src="https://example.com/images/image.jpg" alt="An example image" width="200" height="150">

উপরের উদাহরণে, প্রস্থ বৈশিষ্ট্যটি "200" পিক্সেলে সেট করা হয়েছে এবং উচ্চতা বৈশিষ্ট্যটি "150" পিক্সেলে সেট করা হয়েছে, ছবির জন্য পছন্দসই মাত্রা নির্দিষ্ট করে৷ এই বৈশিষ্ট্যগুলি ওয়েব ব্রাউজার দ্বারা ওয়েব পৃষ্ঠায় নির্দিষ্ট প্রস্থ এবং উচ্চতা সহ চিত্র রেন্ডার করার জন্য ব্যবহার করা হয়।

এটি লক্ষ করা গুরুত্বপূর্ণ যে প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি সেট করা চিত্রের আকৃতির অনুপাতকে প্রভাবিত করতে পারে, যার ফলে এটি প্রসারিত বা সংকুচিত হতে পারে। সাধারণত বিকৃতি এড়াতে তাদের আসল আকৃতির অনুপাত সহ চিত্রগুলি ব্যবহার করার পরামর্শ দেওয়া হয়। 

আপনি যদি একটি চিত্রের আকৃতির অনুপাত পরিবর্তন না করে তার প্রদর্শনের আকার নিয়ন্ত্রণ করতে চান, আপনি সরাসরি প্রস্থ এবং উচ্চতা বৈশিষ্ট্যগুলি সেট করার পরিবর্তে <img> ট্যাগে স্টাইলিং প্রয়োগ করতে CSS ব্যবহার করতে পারেন।

Set Image Border:

HTML এ, আপনি <img> ট্যাগের বর্ডার অ্যাট্রিবিউট ব্যবহার করে একটি ইমেজ বর্ডার সেট করতে পারেন। বর্ডার অ্যাট্রিবিউট পিক্সেলে ছবির চারপাশে সীমানার প্রস্থ নির্দিষ্ট করে। এখানে একটি উদাহরণঃ- 

<img src="https://example.com/images/image.jpg" alt="An example image" border="1">

উপরের উদাহরণে, সীমানা বৈশিষ্ট্যটি "1" এ সেট করা হয়েছে, যা নির্দেশ করে যে চিত্রের চারপাশে 1 পিক্সেল প্রস্থের একটি সীমানা প্রয়োগ করা উচিত। আপনি সীমানার পছন্দসই প্রস্থ নির্দিষ্ট করতে সীমানা বৈশিষ্ট্যের মান সামঞ্জস্য করতে পারেন।

এটা উল্লেখ করার মতো যে বর্ডার অ্যাট্রিবিউটের ব্যবহার সেকেলে বলে মনে করা হয় এবং আধুনিক HTML-এ সুপারিশ করা হয় না। পরিবর্তে, একটি চিত্র বা অন্য কোনো HTML উপাদানের বর্ডার স্টাইল করতে CSS ব্যবহার করা ভালো। এখানে CSS ব্যবহার করে একটি উদাহরণঃ- 

<img src="https://example.com/images/image.jpg" alt="An example image" style="border: 1px solid black;">

উপরের উদাহরণে, স্টাইল অ্যাট্রিবিউটটি সরাসরি <img> ট্যাগে CSS প্রয়োগ করতে ব্যবহৃত হয়, সীমানাটি 1 পিক্সেল চওড়া, কঠিন এবং কালোতে সেট করে। উদ্বেগ এবং রক্ষণাবেক্ষণের আরও ভাল পৃথকীকরণের জন্য HTML-এ স্টাইলিং করার জন্য সাধারণত CSS ব্যবহার করার পরামর্শ দেওয়া হয়।

Set Image Alignment:

HTML এ, আপনি <img> ট্যাগের সারিবদ্ধ বৈশিষ্ট্য ব্যবহার করে একটি চিত্রের প্রান্তিককরণ সেট করতে পারেন। সারিবদ্ধ বৈশিষ্ট্যটি নির্দিষ্ট করে কিভাবে চিত্রটিকে তার মূল উপাদানের মধ্যে অনুভূমিকভাবে সারিবদ্ধ করা উচিত। 

যাইহোক, অনুগ্রহ করে মনে রাখবেন যে সারিবদ্ধ বৈশিষ্ট্যটি HTML5-এ অবমূল্যায়িত হয়েছে এবং এটির ব্যবহার সুপারিশ করা হয় না। পরিবর্তে, চিত্র সারিবদ্ধকরণের জন্য CSS ব্যবহার করা ভাল। এখানে একটি উদাহরণঃ- 

<img src="https://example.com/images/image.jpg" alt="An example image" align="right">

উপরের উদাহরণে, সারিবদ্ধ বৈশিষ্ট্যটি "ডানে" সেট করা হয়েছে, যা নির্দেশ করে যে চিত্রটিকে তার মূল উপাদানের মধ্যে ডানদিকে সারিবদ্ধ করা উচিত।

যাইহোক, উদ্বেগ এবং রক্ষণাবেক্ষণের আরও ভাল বিচ্ছেদ অর্জনের জন্য চিত্র সারিবদ্ধকরণের জন্য CSS ব্যবহার করার পরামর্শ দেওয়া হয়। এখানে CSS ব্যবহার করে একটি উদাহরণঃ- 
<img src="https://example.com/images/image.jpg" alt="An example image" style="float: right;">

উপরের উদাহরণে, স্টাইল অ্যাট্রিবিউটটি সরাসরি <img> ট্যাগে CSS প্রয়োগ করতে ব্যবহৃত হয়, ফ্লোট প্রপার্টি ব্যবহার করে অর্জন করা হয়দ্যডান প্রান্তিককরণ। আপনি আপনার প্রয়োজনীয়তা অনুযায়ী চিত্র সারিবদ্ধকরণ অর্জন করতে পাঠ্য-সারিবদ্ধ বা ফ্লেক্সবক্স/গ্রিড লেআউটের মতো অন্যান্য CSS বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন।