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">

Try it yourself

উপরে দেখতে পাচ্ছি এইচটিএমএল পেজে ইমেজ নিয়ে আসবার একটি কোড যেখানে 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">

Try it yourself

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

Related Post

html এ DOCTYPE html কেন ব্যবহার হয়... শুরুতেই বলে রাখা ভালো  কে সম্পূর্ন ট্যাগ বলা হয় না।  ব্যাবহার করা হয়ে থাকে  html এর কোন ভার্সন সেইটাকে বোঝাতে।  এইচট...
aside ট্যাগ ও HTML aside ট্যাগের ব্যবহার... aside ট্যাগ কোন ডকুমেন্ট এর সাথে রিলেটেড বিষয় গুলকে আলাদা রাখবার জন্য ব্যবহার হয়। এক কথায় কোন প্রবন্ধ বা আটিকেল এর সাথে সম্পর্ক যুক্ত বিষয় গুল একটু সা...
HTML base ট্যাগ ও base ট্যাগের ব্যবহার... সাধারণত একটি ডকুমেন্টের সমস্ত ইউআরএল বা ঠিকানা গুলির জন্য এ্কটি ডিফল্ট URL ও এর টার্গেট ঠিক করা হয়ে থাকে base ট্যাগ দিয়ে  । base ট্যাগ ব্যবহার করা হয় ...
HTML u ট্যাগ ও u ট্যাগের ব্যবহার... সাধারণত HTML u ট্যাগ কোন ডকুমেন্টে ব্যবহার করা হলে সে ডকুমেন্টের নিচের দিকে আন্ডারলাইন যুক্ত হয়। আমরা anchor tag ব্যবহার করলে লিংক এর নিচে আন্ডার লাইন...
HTML এ div ট্যাগ ও div ট্যাগের ব্যবহার... HTML এ একটি নির্দিষ্ট অংশকে আলাদাভাবে স্টাইল কিংবা ব্লক আকারে তৈরি করবার জন্য সাধারণত div ট্যাগ ব্যবহার করা হয়ে থাকে।  আমরা যখন একটি ওয়েবসাইট ভিজিট কর...
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 *

error: Content is protected !!