html img tag কিভাবে ব্যাবহার করবেন

Web Page এ ছবি নিয়ে আসবার জন্য আমাদের img tag টি ব্যবহার করতে হয় html code এ । html5 standard এ img tag এর দুটি attribute থাকতেই হবে, আর তারা হচ্ছে, src ও alt . এর আগে আমরা html tag ও html attributes নিয়ে বিস্তারিত আলোচনা করেছি । তো চলুন দেখা html img ট্যাগ কিভাবে ব্যাবহার করবেন

img tag in html

img tag in html

<img src="imagename.jpg" alt="New Image">

উপরে দেখতে পাচ্ছি এইচটিএমএল পেজে ইমেজ নিয়ে আসবার একটি কোড যেখানে src (source) attribute এর ভিতরে একটি ইমেজের নাম দেয়া আছে ( imagename.jpg )  ইমেজ ফাইল এ্ক্সটেনশন (.jpg) সহ । আর এর সাথে যে alt attribute টি আছে সেটি আসলে Alternative Text নামে পরিচিত যা কোন কারনে ইমেজ টি লোড না হয়ে এর ভেলু কে দেখায় (উপরের কোডের ক্ষেত্রে New Image দেখাবে যদি ইমেজ টি না লোড হয় )

Note  :  উপরের কোড এম মতো করে HTML পেইজ এ ইমেজ নিতে হলে ইমেজ ফাইলটিকে html file টি যে ফোল্ডারে আছে সেই এ্কই ফোল্ডারে রাখতে হবে । অনেক সময় ফাইলের extension দেখা যায়না, সে ক্ষেত্রে দেখে নিন কিভাবে ফাইল এক্সটেনশন দেখা যায়

  • img tag এর কোন closing tag নেই
  • img tag একটি inline element
  • html5 এ দম img tag এর সাথে অবশ্যই alt attribute যোগ করতে হবে

ইমেজের সাইজ ছোট বা বড় করবার জন্য আমরা চাইলে height ও width  এট্রিবিউট ব্যবহার করতে পারি । যদিও কাজটি করার জন্য CSS ই ভালো অপশন । নিচের কোড টি খেয়াল করুন …

<img src="imagename.jpg" alt="New Image" width="250" height="250">

আমরা এখানে height ও width  এর ভেলু দিয়েছি 250, ফলে ইমেজ টি এবার স্কয়ার হবে । তবে এতে করে ইমেজ টি shape টা নষ্ট হয়ে যেতে পারে কারন ইমেজ টি আগে থেকে হয়তো স্কয়ার ছিলোনা । সে ক্ষেত্রে শুধু height কিংবা  width ব্যবহার করা যেতে পারে ।

Related Post

html এ DOCTYPE html কেন ব্যবহার হয়... শুরুতেই বলে রাখা ভালো  কে সম্পূর্ন ট্যাগ বলা হয় না।  ব্যাবহার করা হয়ে থাকে  html এর কোন ভার্সন সেইটাকে বোঝাতে।  এইচট...
কিভাবে ওয়ার্ডপ্রেস ইমেজ অ্যাড করবো... একটি ব্লগ পোস্ট কিংবা পেজ এর মধ্যে যদি ব্যবহার করা হয়ে থাকে, তাহলে ব্লগ পোস্টটি অথবা সেই পেজটি দেখতে সুন্দর ও তথ্য বহুল হয় । আমরা যখন বিভিন্ন প্রকার ও...
html link বা a tag এর ব্যবহার... Link অর্থ যুক্ত করা। আর একটি ওয়েব পেজের সাথে আরও একটি পেজকে যুক্ত করাই হচ্ছে link এর মূল কাজ।  যেকোন ওয়েব পেজে link করার জন্য a tag, যাকে anchor ট্যাগ...
MS Word এ Picture Insert এবং Formatting এর ব্যবহার... MS Word  ডকুমেন্টে  কিছু লেখার মাঝে প্রায়ই ছবি সংযোগ করতে হয়। এ ক্ষেত্রে ডকুমেন্টে ছবি সংযোগ করার জন্য  Insert Picture অপশন টি ব্যবহার করে যেকোনো  ছবি...
HTML হেডিং ট্যাগ ও এর ব্যবহার... সাধারণত HTML এ ছয় ধরনের হেডিং ট্যাগ রয়েছে, h1 to h6 পর্যন্ত। তবে h1 সবচেয়ে বড় হেডিং ট্যাগ এবং সবার ছোট h6 Heading Tag. HTML এ কোন ওয়েবপেজে কোন ডকুমেন্...

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

*