এইচটিএমএল ছবি টিউটোরিয়াল (HTML Images Tutorial in Bangla)

ছবি একটা গুরুত্বপুর্ন বিষয় এর সঠিক ব্যবহার আমাদের জানতে হবে। <img/> ট্যাগ ব্যবহার করে আমরা ওয়েব পেজ এ ইমেজ নিয়ে আসতে পারি।

1.<img src="/sunset.gif" />

প্রদর্শন:

এইচটিএমএল-ছবি src:

Src attribute গুরুত্বপুর্ন বিষয়। Src এর অর্থ সোর্স(source) অর্থাৎ ইমেজের উৎস বা যেখানে picture file টি অবস্থিত।
দুটি উপায়ে আমরা ইমেজের সোর্স নির্দিস্ট করতে পারি।
১. Standard URL ব্যবহার করে
(src=http://www. webcoachbd.com/pics/htmlT/sunset.gif)
২. web server এ file কপি বা আপলোড করে
(src="/../sunset.gif")
এই picture file এর location এর সাথে .এইচটিএমএল file এর location এর সম্পর্ক আছে।
URL Types:

Local Src	Location Description
src="/sunset.gif"	picture file এবং .html file একই  directory তে অবস্থান বরে।
src="/../sunset.gif"	picture file পুর্ববতি  directory তে অবস্থান করে .html file মত।
src="/../pics/sunset.gif"	pic directory এর picture file পুর্ববতি directory তে অবস্থান করে .html file এর মত।

এইচটিএমএল-alternative attribute:

Alt attribute নির্দিস্ট করে অলটারনেটিভ টেক্সট অর্থ্যাৎ যখন ইমেজ প্রদশির্ত হয় না তখন অলটারনেটিভ টেক্সটি প্রদশির্ত হয় । ইমেজ প্রদশির্ত না হওয়ার কারন হতে পারে ফাইলটি নষ্ট হয়ে গেছে বা browser ইমেজ ফাইলটি খুজে পাচ্ছে না।

1.<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />

প্রদর্শন:

এইচটিএমএল-ছবি height এবং width:

ইমেজের height এবং width ঠিক করার জন্য height এবং width attribute ব্যাবহার করা হয়।

1.<img src="/sunset.gif" height="50" width="100">

প্রদর্শন:

এইচটিএমএল-Vertically এবং Horizontally align ছবি:

Align এবং valign  attribute ব্যবহার ইমেজের অবস্থান নির্ধারন করতে পারি।

1. align (Horizontal)
   • right
   • left
   • center
2. valign (Vertical)
   • top
   • bottom
   • center

নিচে উদাহরন দেয়া হলো

1.<p>This is paragraph 1, yes it is...</p>

2.<p>

3.<img src="/sunset.gif" align="right">

4.The image will appear along the...isn't it?

5.</p>

6.<p>This is the third paragraph that appears...</p>

প্রদর্শন:

This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image alignment works. The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren't talking about that, so it's rather a waste, isn't it? This is the third paragraph that appears below the paragraph with the image!

এইচটিএমএল-ইমেজকে লিংক হিসাবে ব্যবহার:

ইমেজকে লিংক হিসাবে ব্যবহার করা যায়।

1.<a href="http://www.webcoachbd.com/">

2.<img src="/sunset.gif">

3.</a>

প্রদর্শন:

এইচটিএমএল- Thumbnails:

Thumbnails হল ছোট সাইজের ইমেজ যা বড়, ভাল মানের ইমেজের সাথে লিংক করে। এই লিংক মাধ্যমে picture quality রক্ষা করা যায়।Thumbnails একটা নিম্ন মানের ইমেজ যা ইমেজ লিংক হিসাবে কাজ করে।

1.<a href="/sunset.gif">

2.<img src="/thmb_sunset.gif">

3.</a>