HTML -এ ছবি যুক্ত করার নিয়ম: <img> ট্যাগ, অ্যাট্রিবিউট ও ইমেজ ফরম্যাট (HSC আইসিটি)
আপনার ওয়েবসাইটকে আরও আকর্ষণীয় করুন! এইচটিএমএল-এ ছবি যুক্ত করার নিয়ম: <img> ট্যাগ, অ্যাট্রিবিউট ও ইমেজ ফরম্যাট (HSC আইসিটি)
একটি ওয়েবসাইটের মধ্যে আমরা যে শুধু তথ্যই দেখি তা কিন্তু নয়, একটি ওয়েবসাইটকে দৃষ্টিনন্দন ও আকর্ষণীয় করতে হলে অবশ্যই ওয়েবসাইটের তথ্য রিলেটেড বিভিন্ন ধরনের গ্রাফিক্স ও ছবি ব্যবহার করা হয়। যদি একটি ওয়েবসাইট শুধু ট্যাক্স ভিত্তিক তথ্য থাকে সেই ওয়েবসাইট পাঠকদের কাছে বিরক্তির একটা কারণ হতে পারে।
এই জন্য একটি ওয়েবসাইটে ছবি বা গ্রাফিক্স খুবই গুরুত্বপূর্ণ। আজকে আমরা একটি ওয়েব পেজে কিভাবে ছবি ও গ্রাফিক্স যুক্ত করা যায় সেই সম্পর্কে এইচটিএমএল কোড দেখব। এইচএসসি শিক্ষার্থীদের আইসিটি বইয়ের প্রতিপাদ্য বিষয়।
এইচটিএমএল-এ ইমেজ যুক্ত করার নিয়ম:
এইচটিএমএল পেইজে ইমেজ যুক্ত করার জন্য প্রধানত <img> ট্যাগ ব্যবহার করা হয় ।
সিনট্যাক্স: কোড উদাহরণ:
<img src="image_url/Image Name" alt="বিকল্প নাম">
গুরুত্বপূর্ণ কিছু তথ্য:
- এম্পটি ট্যাগ: <img> একটি এম্পটি ট্যাগ, অর্থাৎ এর কোনো ক্লোজিং ট্যাগ নেই ।
- src অ্যাট্রিবিউট: এটি ইমেজের সোর্স বা উৎস (URL) নির্দেশ করে ।
- alt অ্যাট্রিবিউট: কোনো কারণে ব্রাউজার ইমেজ লোড করতে না পারলে ইমেজের পরিবর্তে যে টেক্সট প্রদর্শিত হবে, তা এখানে লেখা হয় ।
একটি ছবি সাধারণত দুইটি অংশ থাকে একটি হচ্ছে Name আরেকটি হচ্ছে ছবির Formate যেটাকে আমরা ছবির ফাইল Format বলে থাকি ছবির বিভিন্ন ধরনের ফরমেট হয়ে থাকে যেমন:
- JPG/JPEG (Joint Photographic Experts Group) জটিল কালার ও ফটোগ্রাফির জন্য শ্রেষ্ঠ।
- GIF (Graphics Interchange Format) ছোট অ্যানিমেশন ও লোগোর জন্য ব্যবহৃত হয়।
- PNG (Portable Network Graphics) ট্রান্সপারেন্সি (স্বচ্ছতা) ও রঙিন গ্রাফিক্সের জন্য।
- BMP (Bitmap image file) ফাইলের আকার বড় হওয়ায় ওয়েবে এর ব্যবহার নেই বললেই চলে।
ইমেজের সাইজ নিয়ন্ত্রণ (Width & Height):
ইমেজটি ওয়েবপেজে কতটুকু বড় বা ছোট দেখাবে তা height (উচ্চতা) এবং width (প্রশস্ততা) অ্যাট্রিবিউট দিয়ে নিয়ন্ত্রণ করা যায় । পিক্সেল এককে এই মাপ নির্ধারণ করা হয় ।
- width: প্রস্থ (পিক্সেল)
- height: উচ্চতা (পিক্সেল)
যেমন একটি ছবির নাম ocean.jpg তার প্রশস্ত 415px এবং উচ্চতা 332px
কোড উদাহরণ:
<img src="ocean.jpg" width="415px" height="332px">
ছবিতে Alt Attribute ব্যবহার:
ছবিতে Alt Attribute ব্যবহার করা হয় যদি কোন কারণে ওয়েব পেজের মধ্যে ছবি প্রদর্শন করতে ব্যর্থ হয় তখন Alt Attribute এর মধ্যে যে নামটি আমরা দিব এই নামটি ছবির পরিবর্তে প্রদর্শিত হবে।
কোড উদাহরণ :
<img src="boat.gif" alt="Big Boat">
এখানে boat.gif নামে ছবিটি কোন কারনে ওয়েব পেজে প্রদর্শন না হলে Big Boat নামে লেখাটি প্রদর্শিত হবে।
অন্যান্য সুবিধা:
- ইমেজ লোড না হলে তথ্য দেয়
- SEO উন্নত করে
- স্ক্রিন রিডার ব্যবহারকারীদের সাহায্য করে
Background Image ব্যবহার:
ওই পেজের মধ্যে যদি আমরা ব্যাকগ্রাউন্ড হিসেবে কোন ইমেজকে প্রদর্শন করাতে চাই তাহলে এইচটিএমএল এর বডি ট্যাগের মধ্যে ইমেজ ব্যবহার করতে হয়।
কোড উদাহরণ:
<body background="image.jpg">
ছবিতে Border Attribute ব্যবহার:
চারিদিকে ছবির চারিদিকে নির্দিষ্ট পরিমাণ বর্ডার যোগ করার জন্য বর্ডার এট্রিবিউট ব্যবহার করা হয়:
কোড উদাহরণ:
<img src="button.gif" border="5px">
লোকেশন / Folder যুক্ত ছবি সংযুক্ত করা:
ওয়েব পেজের মধ্যে ছবি যুক্ত করার জন্য html কোডের কোন File Path উল্লেখ থাকে যেমন বিভিন্ন ধরনের ফোল্ডারের নাম উল্লেখ থাকে তখন আমাদের ছবিটি যুক্ত করতে ছবির ফোল্ডার name উল্লেখ করতে হয়।
যেমন book.png নামে একটা ছবি Books ফোল্ডারের মধ্যে Image ফোল্ডারের রয়েছে তাহলে:
কোড উদাহরণ:
<img src="Books/image/book.png" >
ইমেজকে লিঙ্ক হিসেবে ব্যবহার/ Hyperlink
আপনি চাইলে কোনো ছবিতে ক্লিক করলে অন্য একটি পেইজ ওপেন হবে—এমন ব্যবস্থা করতে পারেন। একে 'ইমেজ লিঙ্ক' বলা হয় । এজন্য <a> ট্যাগের ভেতরে <img> ট্যাগটি বসাতে হয় ।
কোড উদাহরণ:
<a href="target_page.html"> <img src="button.gif" width="65" height="38" border="0"> </a>
ছবি বা ইমেজ সম্পর্কিত বহুনির্বাচনি প্রশ্ন (MCQ)
১. কোনটি ফাঁকা এলিমেন্ট? [সি. বো. ২০২৪]
ক. <title> খ. <body> গ. <img> ঘ. <head>
উত্তর: গ. <img>
২. <img> ট্যাগের আবশ্যিক অ্যাট্রিবিউট কোনটি? [কু. বো. ২০২৫]
ক. src খ. href গ. target ঘ. border
উত্তর: ক. src
৩. দৈর্ঘ্য 120PX প্রন্থ 150Px আকারের Flag.jpg নামক ছবি সংযুক্তির জন্য নিচের সঠিক HTML কোড কোনটি? [য. বো. ২০২৫]
ক. <img src="Flag" height="120Px"width="150Px">
খ. <img src="Flag.jpg" height=120Px width = 150px>
গ. <img src="Flag-jpg" height="120Px" width="150px">
ঘ. <img src="Flag.jpg" h="120Px" w="150Px">
উত্তর: গ. <img src="Flag-jpg" height="120Px" width="150px">
৪. HTML এ ইমেজ ফরমেট হলো- [ঢা. বো. ২০২৩]
i. .gif ii. .png iii. .psd
নিচের কোনটি সঠিক?
ক. i ও ii খ. i ও iii গ. ii ও iii ঘ. i, ii ও iii
উত্তর: ক. i ও ii
৫. দিপু তার ওয়েবসাইটে লেখার সাথে ছবিও যুক্ত করেছে। উদ্দীপকের দিপু কোন ট্যাগটি ব্যবহার করে ছবিটি যুক্ত করেছে? [কু. বো. ২০২৩]
ক. <caption> খ. <img> গ. <head> ঘ. <html>
উত্তর: খ. <img>
৬. আফরা html ক্লাসে nature.jpg নামে 700x500 সাইজের একটি ছবি যুক্ত করে। আফরার html কোড হবে- [য. বো. ২০২৩]
ক. <img src = "nature.jpg, width = 700, height=500">
খ. <img src = "nature.jpg" width = "700" height = "500">
গ. <img> nature.jpg, width = 700, ,height=500>
ঘ. <img> "nature.jpg" "width=700" "height=500" </img>
উত্তর: খ. <img src = "nature.jpg" width = "700" height = "500">
৭. ছবি প্রদর্শনের ট্যাগ কোনটি? [ব. বো. ২০২৩]
ক. <ul> খ. <ol> গ. <img> ঘ. <li>
উত্তর: গ. <img>
৮. কোনটি এম্পটি এলিমেন্ট? [চ. বো. ২০২৩]
ক. <P> খ. <a href> গ. <ol> ঘ. <img>
উত্তর: ঘ. <img>
৯. ব্রাউজার যদি কোনো কারণে ইমেজ লোড করতে ব্যর্থ হয়, তখন ইমেজের পরিবর্তে কোনো টেক্সট প্রদর্শনের জন্য ব্যবহৃত অ্যাট্রিবিউট কোনটি? [সি. বো. ২০২৩]
ক. Src খ. Title গ. Alt ঘ. Align
উত্তর: গ. Alt
১০. ওয়েবপেজে 640x480 পিক্সেলের map.jpg ইমেজটি যুক্ত করার জন্য <img src = "map.jpg" > এর সাথে কোন নির্দেশনা যুক্ত হবে? [চ. বো-১৭]
ক. width="640" height="480"
খ. pixelw="640" "pixelh="480"
গ. w="640" h="480"
ঘ. ixwidth="640" pixheight="480"
উত্তর: ক. width="640" height="480"
১১. pic-1.jpg নামের ইমেজটি ওয়েবপেইজে প্রদর্শনের কোড- [মা-১৮]
ক. <image src="pic-l.jpg">
খ. <img src="pic-1.jpg">
গ. <img>="pic-l.jpg"</img>
ঘ. <p>="pic-1.jpg"</p>
উত্তর: খ. <img src="pic-1.jpg">
১২. নিচের কোনটি সঠিক? [কু. বো-১৯]
ক. <img> src = "rose.jpg"<limg>
খ. <img>src=rose.jpg<limg>
গ. <img src="rose.jpg">
ঘ. <img><src="rose.jpg"><limg)
উত্তর: গ. <img src="rose.jpg">
১৩. HTML এ ইমেজ ফরমেট সাপোর্ট করে- [দি. বো. ২০২৫]
i. .gif ii. .png iii. .jpg
নিচের কোনটি সঠিক?
ক. i ও ii খ. ii ও iii গ. i ও iii ঘ. i, ii ও iii
উত্তর: ঘ. i, ii ও iii
১৪. ওয়েব-এ ব্যবহৃত ইমেজ ফরমেট- [NCTB বই প্রশ্ন ৭]
i. Gif ii. png iii. jpeg
নিচের কোনটি সঠিক?
ক. i ও ii খ. i ও iii গ. ii ও iii ঘ. i, ii ও iii
উত্তর: ঘ. i, ii ও iii
১৫. ওয়েবসাইটে ছবি সংযুক্ত করার উপযুক্ত ফরমেট হলো- [বি. বো.-১৭]
i. .jpg ii. .img iii. .png
নিচের কোনটি সঠিক?
ক. i ও ii খ. i ও iii গ. ii ও iii ঘ. i, ii ও iii
উত্তর: খ. i ও iii
১৬. সারিকা যে ছবিটি সংযুক্ত করেছে, তা হতে পারে- [য. বো-১৬]
i. jpg ii. bmp iii. png
নিচের কোনটি সঠিক?
ক. i ও ii খ. i ও iii গ. ii ও iii ঘ. i, ii ও iii
উত্তর: ঘ. i, ii ও iii
নিচের উদ্দীপকটি পড় এবং ১৭ নং প্রশ্নের উত্তর দাও:
রহমান তার ওয়েবসাইটে লেখার সাথে ছবিও যুক্ত করেছে। এতে করে তার সাইটটি সুন্দর ও আকর্ষণীয় হয়েছে।
১৭. রহমান যে ছবিটি যুক্ত করেছে, সেটি যে ফরমেটের হতে পারে- [ম. বো. ২০২৪]
i. .jpg ii. .png iii. .psd
নিচের কোনটি সঠিক?
ক. i ও ii খ. i ও iii গ. ii ও iii ঘ. i, ii ও iii
উত্তর: ক. i ও ii
নিচের উদ্দীপক অনুসারে ১৮ নং প্রশ্নের উত্তর দাও:
একটি ওয়েবসাইটের ৪ নম্বর পেজে 300x300 সাইজের pic.jpg নামের একটি ছবি সংযুক্ত রয়েছে। তবে সমস্যা হলো সাইটটির এক পেইজ হতে অন্য পেইজে যাওয়া যাচ্ছে না।
১৮. ৪ নম্বর পেইজের জন্য প্রযোজ্য HTML কোড হলো- [ব. বো-১৭]
ক. <img src "pic.jpg" height = 300 width = 300>
খ. <img src ="pic.jpg",height="300" width="300">
গ. <img src = "pic.jpg" height = "300" width="300">
ঘ. <img src="pic.jpg" height=300, width=300>
উত্তর: গ. <img src = "pic.jpg" height = "300" width="300">
নিচের উদ্দীপকটি পড় এবং ১৯ ও ২০ নং প্রশ্নের উত্তর দাও:
সুভাস HTML কোড দিয়ে HSC.jpg নামের একটি ফাইলযুক্ত করে ওয়েবপেজ তৈরি করে। পরবর্তীতে ওয়েবপেজটি সবাইকে প্রদর্শনের জন্য প্রয়োজনীয় পদক্ষেপ গ্রহণ করে।
১৯. উদ্দীপকের ফাইলটির (HSC.jpg) জন্য আবশ্যকীয় অ্যাট্রিবিউট কোনটি? [ম. বো. ২০২৫]
ক. href খ. img গ. src ঘ. alt
উত্তর: গ. src
নিচের উদ্দীপকটি পড় এবং ২০ নং প্রশ্নের উত্তর দাও:
রাসেল html ব্যবহারিক ক্লাসে লিখল <p> <img src = "Picture. jpg" width = "300" height = "200"> </p> কিন্তু আউটপুটে তার ফলাফল আসেনি।
২০. উদ্দীপক (<img src = "Picture.jpg" width = "300" height = "200">) এ Attribute কোনটি? [ব. বো. ২০২৪]
ক. P খ. img গ. width ঘ. picture
উত্তর: গ. width
নিচের উদ্দীপকটি পড় এবং ২১ ও ২২নং প্রশ্নের উত্তর দাও:
হাসি HTML ভাষা শিখেছে। বর্তমানে সে ওয়েব পেজে ছবি যুক্ত করা শিখছে।
২১. হাসি এখন ওয়েব পেইজে কোন ট্যাগের ব্যবহার শিখছে? [ম. বো. ২০২৪]
ক. <img src="img.png">
খ. <a href="img.png">
গ. <img border="img.png">
ঘ. <img="img.png">
উত্তর: ক. <img src="img.png">
২২. হাসি ওয়েবপেজে ছবি যুক্ত করলে- [ম. বো. ২০২৪]
i. টেক্সট এর পরিমাণ কমিয়ে আনা যাবে ii. ব্যবহারকারীর নিকট পেজটি দৃষ্টিনন্দন হবে iii. ছবি দ্রুত ডাউনলোড হবে
নিচের কোনটি সঠিক?
ক. i ও ii খ. i ও iii গ. ii ও iii ঘ. i, ii ও iii
উত্তর: ক. i ও ii
উত্তর: গ. Alt
