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 হেডিং ট্যাগ ও এর ব্যবহার... সাধারণত HTML এ ছয় ধরনের হেডিং ট্যাগ রয়েছে, h1 to h6 পর্যন্ত। তবে h1 সবচেয়ে বড় হেডিং ট্যাগ এবং সবার ছোট h6 Heading Tag. HTML এ কোন ওয়েবপেজে কোন ডকুমেন্...
HTML i ট্যাগ ও i ট্যাগের ব্যবহার... সাধারণত HTML i ট্যাগ ব্যবহার করে যেকোন লেখাকে Italic  বা বাকা করা যায়। অর্থাৎ i ট্যাগ ব্যবহার করলে text গুলো এই ধরনের হয়ে যায় This is html i tag । মাঝ...
এইচটিএমএল ট্যাগ লিস্ট HTML5 tag list... HTML5 ট্যাগ লিস্টে আমরা তুলে ধরেছি সবগুলো HTML ট্যাগ  এর নাম ও এদের হালকা বিবরনি । ধিরে ধিরে আমরা তুলে ধরছি এদের বিস্তারিত ব্যবহার এই এইচটিএমএল ট্যাগ ...
area ট্যাগ ও map ট্যাগের ব্যবহার উদাহরন সহ... map ট্যাগ এবং area ট্যাগ এই দুটো আসলে একে অপরের সাথে কানেক্টটেড। অনেকটা ul li এবং ol li এই দুইটো ট্যাগের সাথে সর্ম্পকের মতো। যেমন এর আগে আমরা দেখিয়েছি...
HTML title ট্যাগ ও title ট্যাগের ব্যবহার... একটি ওয়েবপেজ তৈরি করার সময় HTML Page এ title বা শিরোনাম  দেয়ার প্রয়োজন হয় এবং এটি থাকে সবার উপরে ট্যাব এর নাম আকারে এর সঠিক ব্যবহারে আপনার কন্টেন্ট গ...
ওয়েবসাইটে Youtube ভিডিও অ্যাড করবো কিভাবে... ইতি পূর্বে আমরা আলোচনা করেছি কিভাবে ওয়েবসাইটে গুগল ম্যাপ প্রর্দশন করা যায়। তারই ধারাবাহিকতায় আজকে আমরা আলোচনা করবো কিভাবে Youtube এর ভিডিও ওয়েবসাইটে প...

You may also like...

Leave a Reply

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

error: Content is protected !!