এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল ইমেজ


এইচটিএমএল ইমেজ ট্যাগ

ট্যাগ বর্ণনা
<img> একটি ইমেজ অন্তর্ভুক্ত করার জন্য ব্যবহার করা হয়
<map> একটি ইমেজ-ম্যাপ তৈরি করার জন্য ব্যবহার করা হয়
<area> ইমেজে ম্যাপের ক্লিকের স্থান নির্ধারণ করার জন্য ব্যবহার করা হয়

এই অধ্যায়ে আমরা নিম্নলিখিত ফর্মেটের ইমেজগুলো কিভাবে একটি ওয়েবপেজে ব্যবহার করা যায়, তা উদাহরণ সহ আলোচনা করবো।

  1. JPG ইমেজ
  2. GIF ইমেজ
  3. PNG ইমেজ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

	<h4>নীলগিরি</h4>
	<img src="../nilgiri.jpg" alt="Nilgiri Bangladesh" style="width:320px;height:240px;">

</body>
</html>

ফলাফল




সিনট্যাক্স

এইচটিএমএলে ইমেজ যোগ করার জন্য <img> ট্যাগ ব্যবহার করা হয়।

<img> ট্যাগটিতে শুধুমাত্র এট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ নেই।

src এট্রিবিউটের মধ্যে ইমেজের URL(ডিরেক্টরি) নির্ধারণ করা হয়।

<img src="url" alt="some_text">

alt এট্রিবিউট

ইমেজ ফাইলের ভূল ডিরেক্টরি বা অন্য যেকোন কারণে যদি ব্রাউজারে ইমেজ প্রদর্শন করা সম্ভব না হয়, তখন ইমেজের বিকল্প হিসেবে একটি টেক্সট প্রদর্শন করানোর জন্য alt এট্রিবিউটের মাধ্যমে টেক্সট নির্ধারণ করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

	<img src="error.png" alt="Satt Icon" style="width:40px;height:40px;">

</body>
</html>

ফলাফল



Note ওয়েব পেজকে ভ্যালিডেট করার জন্য alt এট্রিবিউট আবশ্যক।

ইমেজ Width এবং Height

ইমেজের width(প্রস্থ) এবং height(উচ্চতা) নির্ধারণ করার জন্য style এট্রিবিউট ব্যবহার করুন।

ভ্যালুগুলো pixel এ সেট করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

	<img src="../satt.png" alt="Satt Icon" style="width:128px;height:128px;">

</body>
</html>

ফলাফল




width & height এট্রিবিউট নাকি style এট্রিবিউট

ইমেজের প্রস্থ এবং উচ্চতা নির্ধারণ করার ক্ষেত্রে width,height এবং style তিনটি এট্রিবিউটই এইচটিএমএল(৫) এ বৈধ।

আমরা আপনাকে ইনলাইন style এট্রিবিউট ব্যবহারে পরামর্শ দিবো। কারণ ইনলাইন স্টাইল করা হলে, ইন্টার্নাল স্টাইল বা এক্সটার্নাল স্টাইল ইমেজের সাইজকে পরিবর্তন করতে পারবে না।

উদাহরণ


<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
	<style>
		img {
		width:60%;
		}
	</style>
</head>
<body>

	<img src="../satt.png" alt="Satt Icon" style="width:128px;height:128px;">
	<img src="../satt.png" alt="Satt Icon" width="128" height="128">

</body>
</html>

ফলাফল




অন্য ফোল্ডারের ইমেজ

ইমেজ ফাইলটি কোথায় আছে তা যদি আপনি নির্ধারণ করে না দেন তাহলে ব্রাউজার বুঝে নিবে যে এইচটিএমএল ফাইলটি যে ফোল্ডারে রয়েছে ইমেজটিও একই ফোল্ডারে রয়েছে।

যদি আপনি ইমেজটি অন্য কোনো ফোল্ডারে রাখেন তখন অবশ্যই src এট্রিবিউটে ফোল্ডারের নাম উল্লেখ করে দিবেন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

	<img src="../../images/satt.png" alt="satt" style="width:128px;height:128px;">

</body>
</html>

ফলাফল




এনিমেটেড ইমেজ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

	<img src="../../images/gif2.gif" alt="Walking Man" style="width:304px;height:220px">

</body>
</html>

ফলাফল



নোটঃ এনিমেটেড ইমেজকেও সাধারন ইমেজের মত একই পদ্ধতিতে ব্রাউজারে প্রদর্শন করা হয়।


ইমেজ ফ্লোটিং

ইমেজকে টেক্সটের ডান পাশে অথবা বাম পাশে প্রদর্শনের করার জন্য সিএসএস float প্রোপার্টিটি ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

	<p><strong>ইমেজটি টেক্সটের ডানপাশে ফ্লোট হবেঃ</strong></p>
	<p>
	<img src="../../images/img_tree.gif" alt="Tree" style="float:right;width:42px;height:42px;">
	ডানে ফ্লোটকৃত ইমেজের পাশে কিছু টেক্সট।
	</p>

	<p><strong>ইমেজটি টেক্সটের বামপাশে ফ্লোট হবেঃ</strong></p>
	<p>
	<img src="../../images/img_tree.gif" alt="Tree" style="float:left;width:42px;height:42px;">
	বামে ফ্লোটকৃত ইমেজের পাশে কিছু টেক্সট।
	</p>

</body>
</html>

ফলাফল




ইমেজ ম্যাপ

ইমেজ ম্যাপ তৈরি করার জন্য <map> ট্যাগ ব্যবহার করুন। ইমেজ-ম্যাপ হলো এমন একটি ইমেজ যার বিভিন্ন অংশে ক্লিক করা যায়।

<map> ট্যাগের name এট্রিবিউট এবং <img> ট্যাগের usemap এট্রিবিউট সহযোগী হিসেবে কাজ করে এবং <img><map> ট্যাগের মধ্যে সম্পর্ক তৈরি করে।

<map> ট্যাগের মধ্যে একের অধিক <area> ট্যাগ থাকে যা একটি ইমেজ ম্যাপের ক্লিক করার স্থানকে বুঝায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>


	<p>কাছ থেকে দেখার জন্য সূর্য বা অন্য কোন গ্রহের উপর ক্লিক করুন</p>

	<img src="../planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

	<map name="planetmap">
	<area shape="rect" coords="0,0,82,126" alt="Sun" href="../sun.html">
	<area shape="circle" coords="90,58,3" alt="Mercury" href="../mercur.html">
	<area shape="circle" coords="124,58,8" alt="Venus" href="../venus.html">
	</map>

</body>
</html>

ফলাফল




অধ্যায়ের সারাংশ

  1. ডকুমেন্টে ইমেজ যোগ করার জন্য এইচটিএমএল <img> এলিমেন্ট ব্যবহার করা হয়।
  2. একটি ইমেজের URL নির্ধারণ করার জন্য src এট্রিবিউট ব্যবহার করা হয়।
  3. ইমেজ লোড না হলে ইমেজের পরিবর্তে বিকল্প টেক্সট সেট করার জন্য alt এট্রিবিউট ব্যবহার করা হয়।
  4. ইমেজের সাইজ নির্ধারণ করার জন্য width এবং height এট্রিবিউট ব্যবহার করা হয়।
  5. ইমেজকে কোন কন্টেন্টের ডানে বা বামে নেওয়ার জন্য সিএসএস float প্রোপার্টি ব্যবহার করা হয়।
  6. ইমেজ-ম্যাপ তৈরি করার জন্য এইচটিএমএল <map> এলিমেন্ট ব্যবহার করা হয়।
  7. ইমেজ-ম্যাপ এর মধ্যে ক্লিক করার স্থান যুক্ত করার জন্য এইচটিএমএল <area> এলিমেন্ট ব্যবহার করা হয়।