HTML চিত্র

HTML-এর মাধ্যমে ডকুমেন্টে চিত্র দেখাতে পারেন

উদাহরণ

চিত্র যোগ করা
এই উদাহরণটি দেখায় ওয়েবপেজে চিত্র দেখাতে কিভাবে করা যায়。
বিভিন্ন স্থান থেকে চিত্র যোগ করা
এই উদাহরণটি দেখায় অন্য ফল্ডার বা সার্ভারের চিত্রকে ওয়েবপেজে দেখাতে কিভাবে করা যায়。

（এই পৃষ্ঠার নিচে আরও উদাহরণ পাবেন。）

চিত্র ট্যাগ (<img>) এবং সোর্স অ্যাট্রিবিউট (Src)

HTML-তে, চিত্রটি <img> ট্যাগ দ্বারা নির্ধারিত হয়。

<img> একটি খালি ট্যাগ, অর্থাৎ, তা শুধুমাত্র অ্যাট্রিবিউটগুলিকেই ধারণ করে এবং বন্ধত্যাগ নেই。

পৃষ্ঠায় চিত্র দেখাতে, আপনাকে সোর্স অ্যাট্রিবিউট (src) ব্যবহার করতে হবে। src "সোর্স"-এর মান। সোর্স অ্যাট্রিবিউটের মান হল চিত্রের URL ঠিকানা。

চিত্রটির স্বরূপ নির্ধারণ করার সংজ্ঞা হল:

<img src="url" />

URL হল চিত্র স্থাপনের স্থান। যদি "boat.gif" নামের চিত্র www.codew3c.com এর images ডিরেক্টরিতে অবস্থিত হয়, তবে তার URL হল http://www.codew3c.com/images/boat.gif。

ব্রাউজার চিত্রকে ডকুমেন্টের চিত্র ট্যাগ অবস্থানে দেখাবে। আপনি যদি চিত্র ট্যাগকে দুই অনুচ্ছেদের মধ্যে স্থাপন করেন, তবে ব্রাউজার প্রথমে প্রথম অনুচ্ছেদটি দেখাবে, তারপর চিত্রটি দেখাবে এবং শেষত দ্বিতীয় অনুচ্ছেদটি দেখাবে。

টেম্পলেট প্রতিক্রিয়া (Alt)

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

মৌলিক উপদেশ - উপযুক্ত টিপস:

যদি একটি HTML ফাইলে দশটি ইমেজ থাকে, তবে এই পৃষ্ঠা সঠিকভাবে প্রদর্শন করার জন্য ১১টি ফাইল লোড করা হয়।ইমেজ লোড করা সময় লাগে, তাই আমাদের পরামর্শ: ইমেজকে সতর্কভাবে ব্যবহার করুন。

আরও উদাহরণ

ব্যাকগ্রাউন্ড ইমেজ
এই উদাহরণটি একটি ব্যাকগ্রাউন্ড ইমেজ যোগ করার কিভাবা দেখায়。
ইমেজ সাজানো
এই উদাহরণটি ইমেজকে লেখার মধ্যে কিভাবে সাজানো হয়েছে দেখায়。
ফ্লোটিং ইমেজ
এই উদাহরণটি ইমেজকে প্রথম বা শেষ পরিচ্ছন্ন প্রদর্শন করার কিভাবা দেখায়。
ইমেজ মাপ পরিবর্তন করুন
ইমেজ মাপ পরিবর্তন করুন
ইমেজকে প্রদর্শন করা প্রতিস্থাপন টেক্সট
এই উদাহরণটি ইমেজকে ভিন্ন মাপে কিভাবে প্রদর্শন করা হয়েছে দেখায়।ব্রাউজার ইমেজকে লোড করতে পারলে না তবে, প্রতিস্থাপন টেক্সট অ্যাট্রিবিউট পঠকদেরকে হারানো তথ্য জানায়।পৃষ্ঠার সকল ইমেজকে প্রতিস্থাপন টেক্সট অ্যাট্রিবিউট যোগ করা একটি ভালো অভ্যাস
ইমেজ লিঙ্ক তৈরি করুন
এই উদাহরণটি ইমেজকে লিঙ্ক হিসাবে কিভাবে ব্যবহার করা হয়েছে দেখায়。
ইমেজ ম্যাপ তৈরি করুন
এই উদাহরণটি একটি সক্রিয় অঞ্চল সহ ইমেজ ম্যাপ তৈরি করার কিভাবা দেখায়।এই অঞ্চলগুলি প্রত্যেকটি একটি হাইপারলিঙ্ক হয়。
ইমেজকে ইমেজ ম্যাপ হিসাবে পরিবর্তন করুন
এই উদাহরণটি একটি সাধারণ ইমেজকে ইমেজ ম্যাপ হিসাবে কিভাবে প্রতিস্থাপন করা হয়েছে দেখায়。

ইমেজ ট্যাগ

ট্যাগ বর্ণনা
<img> ইমেজ নির্দিষ্ট করুন。
<map> ইমেজ ম্যাপ নির্দিষ্ট করুন。
<area> ইমেজ ম্যাপের সক্রিয় অঞ্চলকে নির্দিষ্ট করুন。