HTML – Image & Hyperlink (ছবি ও হাইপারলিঙ্ক)
১। ওয়েবপেইজে ছবি যুক্ত করা
ওয়েবপেইজকে সুন্দর, আকর্ষণীয় ও বোধগম্য করার জন্য আমরা বিভিন্ন ছবি ব্যবহার করি। HTML-এ ছবি যুক্ত করতে ব্যবহৃত হয় <img> ট্যাগ।
HTML Syntax:
| অ্যাট্রিবিউট | ব্যবহার |
|---|---|
src |
ছবির পথ বা URL নির্ধারণ |
alt |
বিকল্প টেক্সট (যদি ছবি লোড না হয়) |
width |
ছবির প্রস্থ নির্ধারণ (pixels) |
height |
ছবির উচ্চতা নির্ধারণ (pixels) |
style |
CSS ব্যবহার করে সাইজ/স্টাইল নির্ধারণ |
উদাহরণ:
-
লোকাল ফোল্ডারে সংরক্ষিত ছবি:
-
নির্দিষ্ট আকারে প্রদর্শন:
অথবা CSS ব্যবহার করে:
সমর্থিত ইমেজ ফরম্যাট: JPG, JPEG, PNG, GIF, SVG, BMP
২। হাইপারলিঙ্ক তৈরি
হাইপারলিঙ্কের মাধ্যমে ওয়েবপেজকে অন্য পেইজ, ডকুমেন্ট বা সাইটের সাথে সংযুক্ত করা হয়। HTML-এ ব্যবহৃত হয় <a> (anchor) ট্যাগ।
HTML Syntax:
| প্রকার | ব্যাখ্যা |
|---|---|
| Global | অন্য ওয়েবসাইট বা ওয়েবপেইজের সাথে লিংক |
| Local | একই ওয়েবসাইটের বিভিন্ন পেইজের সাথে লিংক |
| Internal | একই পেইজের বিভিন্ন সেকশনের সাথে লিংক |
উদাহরণ:
-
টেক্সট লিঙ্ক:
-
ইমেজ লিঙ্ক:
অ্যাট্রিবিউট:
-
href→ লিঙ্কের ঠিকানা -
target="_blank"→ নতুন উইন্ডোতে লিঙ্ক খোলে
৩। অডিও ও ভিডিও যুক্ত করা
| মিডিয়া | ট্যাগ & উদাহরণ |
|---|---|
| অডিও | <audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio> |
| ভিডিও | <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> </video> |
৪। চমৎকারভাবে উপস্থাপনার জন্য আইডিয়া
-
গুরুত্বপূর্ণ টার্মগুলো কালো-নীল হাইলাইট করা।
-
কোড সেগমেন্টগুলো কালারফুল বাক্সে রাখতে পারা।
-
উদাহরণগুলো ছবি+টেক্সটের মাধ্যমে দেখানো।
-
সৃজনশীল উদাহরণ: কলেজ/কোম্পানি ওয়েবপেইজের হোমপেইজ তৈরি।
বহুনির্বাচনী প্রশ্ন (MCQ)
-
JPEG এর পূর্ণরূপ কী?
ক) Joint Photographic Imaging Group ✅
খ) Joint Photoshop Expert Group
গ) Joint Photo Exchange Group
ঘ) Joint Photo Graphic Expert Group -
ওয়েব পেজে 1000×800 পিক্সেলের image.jpg যুক্ত করতে কোন নির্দেশনা ব্যবহার হবে?
ক)width="1000" height="800"✅ -
হাইপারলিঙ্ক কত প্রকার?
ক) 2
খ) 3 ✅
গ) 4
ঘ) 5 -
anchor ট্যাগের ডিফল্ট কালার?
ক) red
খ) green
গ) blue ✅
ঘ) pink -
হাইপারলিঙ্কের সঠিক সিনট্যাক্স?
ক)<a href="www">link text</a>
খ)<a href="url">link text</a>✅
গ)<a href="www.url">link text</a>
ঘ)<a href="www link text"></a> -
ওয়েবপেজে চিত্র সংযোগের সিনট্যাক্স?
ক)<img src="url">✅ -
ওয়েবে কোন ইমেজ ফরম্যাট সাপোর্ট করে?
i. GIF ii. JPG iii. BMP
ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii ✅ -
href এর অর্থ?
ক) hot reference
খ) hyperlink replace
গ) hyperlink reference ✅
ঘ) home reference -
<img>ট্যাগ কোন ধরনের?
ক) ব্লক
খ) লাইন
গ) ইনলাইন ✅
ঘ) কনটেইনার -
নতুন উইন্ডোতে লিঙ্ক খোলার জন্য কোন অ্যাট্রিবিউট ব্যবহার হয়?
ক) href
খ) target ✅
গ) src
ঘ) title
জ্ঞানমূলক ও অনুধাবনমূলক প্রশ্ন (5+5)
জ্ঞানমূলক:
-
<img>ট্যাগের প্রয়োজনীয় অ্যাট্রিবিউট কোনটি? →src -
<a>ট্যাগের জন্য কোন অ্যাট্রিবিউট অপরিহার্য? →href -
ওয়েবপেজে ছবি প্রদর্শনের জন্য কোন ফরম্যাট ব্যবহার হয়? → JPG, PNG, GIF
-
হাইপারলিঙ্ক কত প্রকার? → Global, Local, Internal
-
ভিডিও যোগ করতে কোন ট্যাগ ব্যবহার হয়? →
<video>
অনুধাবনমূলক:
-
কেন
<img>ট্যাগে alt ব্যবহার করা হয়? → ছবি লোড না হলে বিকল্প টেক্সট দেখানোর জন্য -
কিভাবে ছবি লিঙ্ক করা যায়? →
<a>ট্যাগের মধ্যে<img>ট্যাগ ব্যবহার করে -
কীভাবে হাইপারলিঙ্ক নতুন উইন্ডোতে খোলা যায়? →
target="_blank" -
ইমেজের সাইজ নির্ধারণে কোন পদ্ধতি ব্যবহার করা যায়? → width ও height অথবা style
-
হাইপারলিঙ্ক কেন ওয়েবসাইটকে ব্যবহার বান্ধব করে? → ইউজার সহজে নেভিগেট করতে পারে
HTML – Image, Hyperlink, Audio & Video (MCQ ১–২৫)
<img>ট্যাগের মূল উদ্দেশ্য কী?
ক) টেক্সট স্টাইল করা
খ) ছবি প্রদর্শন করা ✅
গ) হাইপারলিঙ্ক তৈরি করা
ঘ) ভিডিও চালানো- ওয়েবপেজে ছবি যুক্ত করতে কোন ট্যাগ ব্যবহার হয়?
ক)<a>
খ)<img>✅
গ)<link>
ঘ)<video> <img>ট্যাগের সবচেয়ে গুরুত্বপূর্ণ অ্যাট্রিবিউট কী?
ক) alt
খ) src ✅
গ) width
ঘ) height<img src="logo.png" alt="Logo">এ alt এর কাজ কী?
ক) ছবির আকার পরিবর্তন
খ) বিকল্প টেক্সট দেখানো ✅
গ) লিংক তৈরি
ঘ) অডিও চালানো- কোন ফরম্যাট ওয়েবপেজে ছবি হিসেবে ব্যবহার হয় না?
ক) JPG
খ) PNG
গ) DOC ✅
ঘ) GIF - ওয়েবপেজে 200×300 পিক্সেলের ছবি দেখাতে কোন অ্যাট্রিবিউট ব্যবহার হয়?
ক) src
খ) width ও height ✅
গ) alt
ঘ) href - CSS ব্যবহার করে ছবি সাইজ পরিবর্তন করতে কোন অ্যাট্রিবিউট ব্যবহার করা হয়?
ক) src
খ) style ✅
গ) alt
ঘ) href <a>ট্যাগ কোন কাজের জন্য ব্যবহৃত হয়?
ক) ছবি যুক্ত করা
খ) অডিও প্লে করা
গ) হাইপারলিঙ্ক তৈরি করা ✅
ঘ) টেবিল তৈরি করা- হাইপারলিঙ্ক তৈরি করতে কোন অ্যাট্রিবিউট অপরিহার্য?
ক) alt
খ) href ✅
গ) src
ঘ) target <a href="https://www.google.com">Google</a>এ কোনটি প্রদর্শিত হবে?
ক) URL
খ) Google ✅
গ) HTML কোড
ঘ) blank page- কোনটি গ্লোবাল হাইপারলিঙ্কের উদাহরণ?
ক)<a href="contact.html">Contact</a>
খ)<a href="https://www.facebook.com">Facebook</a>✅
গ)<a href="#section1">Section 1</a>
ঘ)<img src="logo.jpg"> - কোনটি লোকাল হাইপারলিঙ্কের উদাহরণ?
ক)<a href="about.html">About Us</a>✅
খ)<a href="https://www.google.com">Google</a>
গ)<a href="#top">Top</a>
ঘ)<video src="movie.mp4"> - কোনটি ইন্টারনাল হাইপারলিঙ্কের উদাহরণ?
ক)<a href="https://www.google.com">Google</a>
খ)<a href="contact.html">Contact</a>
গ)<a href="#section1">Section 1</a>✅
ঘ)<img src="logo.png"> - হাইপারলিঙ্ক নতুন উইন্ডোতে খুলতে কোন অ্যাট্রিবিউট ব্যবহার হয়?
ক) href
খ) target=”_blank” ✅
গ) alt
ঘ) src - ওয়েবপেজে অডিও প্লে করতে কোন ট্যাগ ব্যবহার হয়?
ক)<video>
খ)<audio>✅
গ)<sound>
ঘ)<play> - অডিও ফাইল যুক্ত করার জন্য কোন অ্যাট্রিবিউট ব্যবহার হয়?
ক) src ✅
খ) alt
গ) href
ঘ) width <audio controls>এর অর্থ কী?
ক) অডিও লিংক
খ) অডিও প্লে কন্ট্রোল সহ ✅
গ) ছবি প্রদর্শন
ঘ) ভিডিও চালানো- ওয়েবপেজে ভিডিও যোগ করতে কোন ট্যাগ ব্যবহার হয়?
ক)<audio>
খ)<video>✅
গ)<movie>
ঘ)<img> - ভিডিওর প্রস্থ এবং উচ্চতা নির্ধারণ করতে কোন অ্যাট্রিবিউট ব্যবহার হয়?
ক) src
খ) width ও height ✅
গ) alt
ঘ) href - কোনটি ভিডিও উদাহরণ?
ক)<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video>✅
খ)<img src="movie.mp4">
গ)<audio src="movie.mp4">
ঘ)<a href="movie.mp4">Movie</a> <img src="photo.png" style="width:200px; height:300px;">এ কোন প্রযুক্তি ব্যবহার হয়েছে?
ক) HTML only
খ) CSS inline style ✅
গ) JavaScript
ঘ) None- ওয়েবপেজে কোন ফরম্যাটের ছবি ব্যবহার করা যায়?
ক) PNG, JPG, GIF ✅
খ) DOC, PDF
গ) TXT
ঘ) EXE <a href="page.html">Click Here</a>এ কোন অংশে ক্লিক করলে লিংক খোলে?
ক) href
খ) Click Here ✅
গ) page.html
ঘ) <a>- ওয়েবপেজে ছবি ও হাইপারলিঙ্ক একসাথে যুক্ত করতে কোন সিনট্যাক্স সঠিক?
ক)<img src="logo.jpg"><a href="url"></a>
খ)<a href="url"><img src="logo.jpg"></a>✅
গ)<a src="logo.jpg"><img href="url"></a>
ঘ)<img href="url"><a src="logo.jpg"></a> - ওয়েবপেজে ছবি প্রদর্শনের জন্য কোন ট্যাগ ব্লক এলিমেন্ট নয়?
ক)<img>✅
খ)<div>
গ)<p>
ঘ)<section> -
<img>ট্যাগের কোনটি অলটারনেটিভ টেক্সট দেখায়?
ক) src
খ) alt ✅
গ) title
ঘ) href -
ওয়েবপেজে কোনো ছবি লোড না হলে কোন অ্যাট্রিবিউটের মান দেখানো হয়?
ক) src
খ) alt ✅
গ) width
ঘ) height -
<img src="logo.jpg" width="200" height="100">কোডে কোনটি সঠিক?
ক) ছবির প্রস্থ 100px
খ) ছবির প্রস্থ 200px ✅
গ) ছবির উচ্চতা 200px
ঘ) ছবির উচ্চতা 50px -
ওয়েবপেজে ছবি ও টেক্সট একসাথে লিঙ্ক করতে কোন ট্যাগ ব্যবহার হয়?
ক)<img>
খ)<a>✅
গ)<video>
ঘ)<audio> -
ওয়েবপেজে ভিডিও ও অডিও প্লে করার জন্য কোন অ্যাট্রিবিউট ব্যবহার হয়?
ক) controls ✅
খ) alt
গ) href
ঘ) src -
<video width="400" height="300" controls>এই কোডে কি হবে?
ক) ছবি প্রদর্শন
খ) ভিডিও প্রদর্শন এবং কন্ট্রোল দেখাবে ✅
গ) অডিও প্লে হবে
ঘ) হাইপারলিঙ্ক তৈরি হবে -
কোনটি
<a>ট্যাগের ভুল ব্যবহার?
ক)<a href="page.html">Link</a>
খ)<a>Click Here</a>✅
গ)<a href="https://google.com">Google</a>
ঘ)<a href="#section">Top</a> -
ওয়েবপেজে ইমেজের বিকল্প টেক্সট প্রদর্শনের জন্য কোনটি ব্যবহার হয়?
ক) src
খ) alt ✅
গ) title
ঘ) href -
<a href="#top">Back to Top</a>কোন ধরনের হাইপারলিঙ্ক?
ক) গ্লোবাল
খ) লোকাল
গ) ইন্টারনাল ✅
ঘ) নন -
কোনটি সঠিক ভিডিও সিনট্যাক্স?
ক)<video src="movie.mp4">
খ)<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video>✅
গ)<audio src="movie.mp4">
ঘ)<img src="movie.mp4"> -
<img src="photo.jpg" style="width:100px; height:200px;">কোন প্রযুক্তি ব্যবহার করে ছবি সাইজ নিয়ন্ত্রণ করছে?
ক) HTML attributes
খ) CSS inline style ✅
গ) CSS external style
ঘ) JavaScript -
ওয়েবপেজে অডিও যুক্ত করতে কোন ফরম্যাট ব্যবহার করা যেতে পারে?
i. mp3 ii. wav iii. ogg
ক) i ও ii
খ) i, ii ও iii ✅
গ) ii ও iii
ঘ) i ও iii -
ওয়েবপেজে হাইপারলিঙ্ক তৈরি করতে কোন ট্যাগ ব্যবহার হয়?
ক)<img>
খ)<a>✅
গ)<link>
ঘ)<href> -
<a href="https://www.example.com" target="_blank">Example</a>এ কি হবে?
ক) একই উইন্ডোতে লিংক খোলে
খ) নতুন উইন্ডোতে লিংক খোলে ✅
গ) ছবি প্রদর্শিত হবে
ঘ) অডিও প্লে হবে -
ওয়েবপেজে
<img>ট্যাগ কোন প্রকার এলিমেন্ট?
ক) ব্লক এলিমেন্ট
খ) ইনলাইন এলিমেন্ট ✅
গ) লিস্ট এলিমেন্ট
ঘ) টেবল এলিমেন্ট -
হাইপারলিঙ্কের মাধ্যমে কোন ধরনের সংযোগ সম্ভব?
i. একই ওয়েবসাইটের পেইজে
ii. অন্য ওয়েবসাইটে
iii. একই পেইজের সেকশনে
ক) i ও ii
খ) ii ও iii
গ) i, ii ও iii ✅
ঘ) শুধুমাত্র ii -
ওয়েবপেজে ছবির আকার না দিলে কি হবে?
ক) ছবি প্রদর্শিত হবে না
খ) আসল আকারে ছবি প্রদর্শিত হবে ✅
গ) লিংক তৈরি হবে
ঘ) অডিও প্লে হবে -
<audio controls>কোন ধরনের কন্ট্রোল দেয়?
ক) Play, Pause, Volume ✅
খ) Only Play
গ) Only Pause
ঘ) Only Volume -
<video>ট্যাগে কোনটি ভুল নয়?
ক) width, height, controls ✅
খ) alt
গ) href
ঘ) title -
ওয়েবপেজে JPG ফাইল ব্যবহার করতে কোন অ্যাট্রিবিউট ব্যবহার হয়?
ক) src ✅
খ) alt
গ) href
ঘ) target -
কোনটি হাইপারলিঙ্কের উদাহরণ?
ক)<img src="logo.jpg">
খ)<a href="about.html">About Us</a>✅
গ)<video src="movie.mp4">
ঘ)<audio src="song.mp3"> -
<a href="#section1">Go</a>ক্লিক করলে কী হবে?
ক) অন্য ওয়েবসাইট খোলে
খ) একই পেইজের সেকশনে চলে ✅
গ) ভিডিও প্লে হবে
ঘ) ছবি প্রদর্শিত হবে -
হাইপারলিঙ্কে কোনটি প্রয়োজনীয়?
ক) href ✅
খ) src
গ) alt
ঘ) width -
ওয়েবপেজে ছবি যোগ করার সময় কোন ফরম্যাট ব্যবহার করা সবচেয়ে ভালো?
ক) TXT
খ) PNG ✅
গ) EXE
ঘ) DOC -
<img src="logo.jpg" alt="Logo" width="200" height="100">এ কোনটি সঠিক?
ক) src=ছবির পথ, alt=বিকল্প টেক্সট, width=প্রস্থ, height=উচ্চতা ✅
খ) alt=ছবির পথ, src=বিকল্প টেক্সট
গ) width ও height=লিংক
ঘ) src ও alt=ভিডিও