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 abbr ট্যাগ ও abbr ট্যাগের ব্যবহার... HTML ট্যাগটি কোন সংক্ষিপ্ত ওয়ার্ডের ক্ষেত্রে ব্যবহার করা হয়ে থাকে। ধরুন আপনি BCC কোথাও ব্যবহার করবেন যার পুর্ণ রুপ হচ্ছে Bangladesh Compu...
HTML article ট্যাগের ব্যবহার – article ট্যাগ... article ট্যাগ হচ্ছে বহুল ব্যবহৃিত ট্যাগ কোন সংজ্ঞা বা প্রবন্ধ লেখার ক্ষেত্রে ।  article এর বাংলা হচ্ছে প্রবন্ধ এবং এটি আসলেই সে কাজেই ব্যবহার হয় HTML ...
area ট্যাগ ও map ট্যাগের ব্যবহার উদাহরন সহ... map ট্যাগ এবং area ট্যাগ এই দুটো আসলে একে অপরের সাথে কানেক্টটেড। অনেকটা ul li এবং ol li এই দুইটো ট্যাগের সাথে সর্ম্পকের মতো। যেমন এর আগে আমরা দেখিয়েছি...
aside ট্যাগ ও HTML aside ট্যাগের ব্যবহার... aside ট্যাগ কোন ডকুমেন্ট এর সাথে রিলেটেড বিষয় গুলকে আলাদা রাখবার জন্য ব্যবহার হয়। এক কথায় কোন প্রবন্ধ বা আটিকেল এর সাথে সম্পর্ক যুক্ত বিষয় গুল একটু সা...
MS Word এ Picture Insert এবং Formatting এর ব্যবহার... MS Word  ডকুমেন্টে  কিছু লেখার মাঝে প্রায়ই ছবি সংযোগ করতে হয়। এ ক্ষেত্রে ডকুমেন্টে ছবি সংযোগ করার জন্য  Insert Picture অপশন টি ব্যবহার করে যেকোনো  ছবি...
HTML এ বাংলা লিখবো কিভাবে... HTML এ বাংলা লিখলেই বাংলা আসেনা অনেক ওয়েব ব্রাউজারে কারন আমরা ওয়েব পেজে যে বাংলা লিখি সেটি ইউনিকোড ভিত্তিক । বাংলা লিখবার জন্য আসলে html এ character s...
এইচ টি এম এল কি একটি ওয়েব পেজের মূল গঠন তৈরি করতে HTML ব্যবহার করা হয়ে থাকে। এইচ টি এম এল হচ্ছে মার্কআপ ল্যাঙ্গুয়েজ, HTML প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। HTML এর ফুল ফ...
HTML হেডিং ট্যাগ ও এর ব্যবহার... সাধারণত HTML এ ছয় ধরনের হেডিং ট্যাগ রয়েছে, h1 to h6 পর্যন্ত। তবে h1 সবচেয়ে বড় হেডিং ট্যাগ এবং সবার ছোট h6 Heading Tag. HTML এ কোন ওয়েবপেজে কোন ডকুমেন্...
HTML – এইচটিএমএল কি এবং HTML শিখবো কিভাবে... HTML কি এবং HTML শিখবো কিভাবে? HTML একটি web based programing language যা ওয়েব সাইত তৈরি করতে ব্যবহার করা হয় এবং আজকাল মোবাইল এর অনেক এপ্লিকেশন বানাতে...

You may also like...

Leave a Reply

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

*