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

এইচটিএমএল ছবি (HTML Images)

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

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

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

Src attribute গুরুত্বপুর্ন বিষয়। Src এর অর্থ সোর্স(source) অর্থাৎ ইমেজের উৎস বা যেখানে picture file টি অবস্থিত।

দুটি উপায়ে আমরা ইমেজের সোর্স নির্দিস্ট করতে পারি।

১. Standard URL ব্যবহার করে

(src=http://www. ypdesign.tk/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 ইমেজ ফাইলটি খুজে পাচ্ছে না।

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

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

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

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

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

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

align (Horizontal), right, left, center, valign (Vertical), top, bottom, center

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

<p>

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

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

</p>

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

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

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

<a href="http://www.ypdesign.tk/">

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

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

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

<a href="/sunset.gif">

<img src="/thmb_sunset.gif">

</a>