HTML এ চিত্র, ইমেজ, থামনেইলের HTML কোড
HTML এ চিত্র, ইমেজ, থামনেইলের HTML কোড
ব্যানারসহ চিত্র যোগ করা (Add Picture with Banner)
একটি ওয়েব পেইজের গুরুত্বপূর্ণ উপাদানসমূহের একটি হচ্ছে ইমেজ। একটি ওয়েব পেইজকে সুন্দর ও আকর্ষণীয় করে তোলার জন্য ব্যানারসহ ইমেজ বা চিত্রের কোনো বিকল্প নেই। HTML পেইজে <img> ট্যাগ দ্বারা নির্ধারণ করা হয়। <img> ট্যাগটি শূন্য অর্থাৎ এটি কেবল অ্যাট্রিবিউট বহন করে এবং এর কোনো closing ট্যাগ নেই। পেইজে কোনো চিত্র বা ইমেজ ব্যবহার করতে হলে src (source) অ্যাট্রিবিউট ব্যবহার করতে হয়। ওয়েবে সাধারণত: .gif, .jpg, .jpeg, .png, .ico, .pex ও .bmp এক্সটেনশনযুক্ত ইমেজ সাপোর্ট করে। কোনো ইমেজকে নির্ধারণ করার জন্য প্রয়োজনীয় কোড হলো :
<img src = “url”>
বা <img src = “Banner.jpg”>
তাহলে Banner.jpg ইমেজটি প্রদর্শিত হবে।
কোডটি টাইপ করে Notepad এ Test-10.html নামে সংরক্ষণ করা হলো-
<html>
<head>
</head>
<body>
<img src = “Banner.jpg”>
</body>
</html>
আউটপুট :
কোনো কারণে যদি ব্রাউজারে ইমেজ প্রদর্শিত না হয় বা ধীরে পেইজ লোড হয় বা ব্যবহারকারী যদি ইমেজ বন্ধ রাখে তবে alt এর মানকে লিঙ্ক হিসেবে দেখাবে।
<img src = “Banner.jpg” alt= “Banner” >
অনেক সময় ছবি বা ইমেজ প্রদর্শিত না হওয়ার কারণ হলো- ছবির ফাইলের নাম ভুল হলে, ছবির এক্সটেনশন ভুল হলে, source ভুল হলে, ছবির রেজুলেশন ব্রাউজারে সাপোর্ট না করলে, ছবিটি নষ্ট হয়ে গেলে, এমনকি ব্রাউজারে ছবি বন্ধ করা থাকলে।
HTML এর ইমেজ কোড : HTML এর ইমেজ কোডটি Notepad এ লিখে Test-12.html নামে সংরক্ষণ করা হলো।
<img src = https://www.prokashdas.com/ict/sunset.gif>
আউটপুট :
HTML এর ইমেজ (দৈর্ঘ্য ও প্রস্থসহ) কোড :
HTML এর ইমেজ কোডটি Notepad এ লিখে Test-13.html নামে সংরক্ষণ করা হলো :
<img src = “sunset.jpg” width = “100%” height = “100%”>
আউটপুট :
থামনেইল (Thumnail) :
ছোট সাইজের ইমেজ যা বড় ভাল মানের ইমেজের সাথে লিঙ্ক করাকে থামনেইল বলে। এ লিঙ্কের মাধ্যমে ছবি বা ইমেজের কোয়ালিটি রক্ষা করা যায়। থামনেইল একটি নিম্নমানের ইমেজ যা ইমেজ লিঙ্ক হিসেবে কাজ করে। যেমন-
<a href=”sunset.jpg”> <img src=”/thmb_sunset.jpg”> </a>
