About Lesson
<!– wp:shortcode –>
TEXT - চিত্র-Image
HTML-এ
১.
এটি responsive images এর জন্য ব্যবহৃত হয়, যার মাধ্যমে বিভিন্ন স্ক্রীন সাইজ এবং রেজোলিউশনের জন্য বিভিন্ন চিত্র নির্বাচন করা যায়।
এখানে, ২.
এটি ৩.
এই অ্যাট্রিবিউটটি ৪.
এই অ্যাট্রিবিউটটি একটি দীর্ঘ বর্ণনা যোগ করতে ব্যবহৃত হয়, যা বিশেষভাবে ব্যবহারকারীদের জন্য সহায়ক হতে পারে যারা স্ক্রীন রিডার ব্যবহার করেন।
এখানে, ৫.
এটি আরও উন্নত এবং মোবাইল-ফ্রেন্ডলি উপায় চিত্র প্রদর্শন করতে ব্যবহৃত হয়, যেখানে আপনি একাধিক চিত্র ফর্ম্যাট এবং আকার নির্ধারণ করতে পারেন।
এখানে, ব্রাউজার ৬.
এটি চিত্রসহ অন্যান্য মিডিয়া ফাইল যেমন PDF বা Flash ফাইলও প্রদর্শন করতে ব্যবহার করা যেতে পারে। এটি
<img> ট্যাগটি ওয়েব পেজে ছবি বা ইমেজ প্রদর্শনের জন্য ব্যবহৃত হয়। এটি একটি স্বতন্ত্র ট্যাগ, অর্থাৎ এর কোন বন্ধনী ট্যাগ নেই। ইমেজ সোর্স (source) অর্থাৎ ফাইলটির অবস্থানকে নির্দেশ করার জন্য src অ্যাট্রিবিউট ব্যবহার করা হয় এবং বিকল্প টেক্সটের জন্য alt অ্যাট্রিবিউট ব্যবহার করা হয়, যা ইমেজ লোড হতে ব্যর্থ হলে দেখানো হয়।
HTML এ চিত্র (Image) যোগ করতে
<img> ট্যাগ ব্যবহার করা হয়। এটি একটি একক ট্যাগ, যার মধ্যে কোনও বন্ধনী ট্যাগ থাকে না। এখানে একটি সাধারণ উদাহরণ দেওয়া হলো:
এই ট্যাগের বিভিন্ন অংশ:
src(source): চিত্রের পথ বা URL যেখানে চিত্রটি সংরক্ষিত রয়েছে। এখানে"image.jpg"একটি উদাহরণ।alt(alternative text): চিত্রটি যদি প্রদর্শিত না হয়, তাহলে এর পরিবর্তে প্রদর্শিত হবে এই টেক্সটটি। এটি অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।widthএবংheight: চিত্রের প্রস্থ এবং উচ্চতা সুনির্দিষ্ট করতে ব্যবহৃত হয়। এগুলি ঐচ্ছিক, তবে সঠিক মান দেওয়ার মাধ্যমে চিত্রের আকার নিয়ন্ত্রণ করা যায়।
title, loading, বা অন্যান্য বৈশিষ্ট্যও যোগ করতে পারেন:
এখানে:
title: মাউস কার্সর চিত্রের ওপর রাখলে একটি টুলটিপ প্রদর্শিত হয়।loading="lazy": চিত্রটি স্ক্রিনে আসার সময় লোড হবে, যা পেজের লোড সময় দ্রুত করে।
HTML
<img> ট্যাগের আরও কিছু বৈশিষ্ট্য এবং ব্যবহার রয়েছে যেগুলি চিত্রকে আরও ভালভাবে কাস্টমাইজ করতে সহায়ক হতে পারে।
১. srcset:
এটি responsive images এর জন্য ব্যবহৃত হয়, যার মাধ্যমে বিভিন্ন স্ক্রীন সাইজ এবং রেজোলিউশনের জন্য বিভিন্ন চিত্র নির্বাচন করা যায়।
এখানে, srcset বিভিন্ন চিত্রের আকার নির্দিষ্ট করে দেয় এবং ব্রাউজার সঠিক চিত্রটি নির্বাচন করবে স্ক্রীনের আকার অনুসারে।
২. sizes:
এটি srcset এর সাথে ব্যবহৃত হয় এবং ব্রাউজারকে জানায় কিভাবে চিত্রটি প্রদর্শিত হবে। এটি নির্ধারণ করে যে, চিত্রের কোন আকারটি নির্বাচন করা উচিত যখন ব্রাউজার স্ক্রীনের আকার অনুসারে বিভিন্ন চিত্র লোড করতে পারে।
এখানে, যদি স্ক্রীনের প্রস্থ ৬০০px এর কম হয়, তবে ছোট চিত্রটি ৫০০px প্রস্থের সাথে লোড হবে। অন্যথায়, বড় চিত্রটি ১০০০px আকারে লোড হবে।
৩. usemap:
এই অ্যাট্রিবিউটটি <map> ট্যাগের সাথে ব্যবহৃত হয় এবং চিত্রের ওপর ক্লিকেবল এরিয়া বা লিঙ্ক তৈরি করতে সাহায্য করে। এটি সাধারণত Image Map এর জন্য ব্যবহৃত হয়।
এখানে:
usemap="#mapname": চিত্রটির সাথে একটি image map সম্পর্কিত করে।<area>: এটি চিত্রের একটি নির্দিষ্ট জায়গাকে একটি লিঙ্কে পরিণত করে।
৪. longdesc:
এই অ্যাট্রিবিউটটি একটি দীর্ঘ বর্ণনা যোগ করতে ব্যবহৃত হয়, যা বিশেষভাবে ব্যবহারকারীদের জন্য সহায়ক হতে পারে যারা স্ক্রীন রিডার ব্যবহার করেন।
এখানে, longdesc নির্দেশ করে যে, চিত্রের বর্ণনা কোথায় পাওয়া যাবে (একটি আলাদা HTML পৃষ্ঠা)।
৫.picture ট্যাগ:
এটি আরও উন্নত এবং মোবাইল-ফ্রেন্ডলি উপায় চিত্র প্রদর্শন করতে ব্যবহৃত হয়, যেখানে আপনি একাধিক চিত্র ফর্ম্যাট এবং আকার নির্ধারণ করতে পারেন।
এখানে, ব্রাউজার webp ফরম্যাট চিত্র লোড করবে যদি এটি সমর্থিত হয়, অন্যথায় এটি jpg ফরম্যাট চিত্র লোড করবে।
৬. object ট্যাগ:
এটি চিত্রসহ অন্যান্য মিডিয়া ফাইল যেমন PDF বা Flash ফাইলও প্রদর্শন করতে ব্যবহার করা যেতে পারে। এটি <img> এর বিকল্প হিসেবে ব্যবহার হতে পারে কিছু পরিস্থিতিতে।
এখানে, object ট্যাগটি image.svg ফাইল প্রদর্শন করবে, কিন্তু যদি SVG সমর্থিত না হয়, তবে এটি fallback.jpg চিত্রটি দেখাবে।
এই বৈশিষ্ট্যগুলি HTML <img> ট্যাগের শক্তিশালী ব্যবহার নিশ্চিত করে, যা চিত্র প্রদর্শন এবং ব্যবস্থাপনার ক্ষেত্রে আরও বেশি নমনীয়তা প্রদান করে।
VIDEO - হাইপারলিংক Hyperlink
No Content
TEXT - হাইপারলিংক Hyperlink
হাইপারলিঙ্ক (Hyperlink) একটি ইলেকট্রনিক লিংক যা এক ওয়েব পেজ থেকে অন্য ওয়েব পেজে বা একই পৃষ্ঠার একটি নির্দিষ্ট স্থানে নিয়ে যায়। এটি মূলত একটি টেক্সট, ছবি, বা অন্য কোনো এলিমেন্ট হতে পারে যা ক্লিক করলে ব্যবহারকারীকে নতুন কোনো তথ্য বা রিসোর্সে পাঠানো হয়।
হাইপারলিঙ্কের বৈশিষ্ট্য:
-
- ক্লিকযোগ্য: হাইপারলিঙ্ক সাধারণত নীল রঙে বা আন্ডারলাইন করা থাকে, যা ব্যবহারকারীদের বুঝতে সাহায্য করে যে এটি ক্লিকযোগ্য।
-
- নেভিগেশন সুবিধা: হাইপারলিঙ্ক ব্যবহারকারীদের ওয়েব পেজগুলোর মধ্যে দ্রুত নেভিগেট করতে সহায়তা করে।
-
- অন্যান্য ফাইল বা অ্যাপ্লিকেশন খুলতে পারে: কিছু হাইপারলিঙ্ক ইমেইল ক্লায়েন্ট, ডকুমেন্ট ফাইল, বা অ্যাপ্লিকেশন খোলার জন্য ব্যবহৃত হয়।
হাইপারলিঙ্কের প্রকারভেদ:
-
- ইন্টারনাল লিংক: একই ওয়েবসাইটের অন্য পেজে নিয়ে যায়।
- উদাহরণ:
<a href="about.html">About Us</a>
- ইন্টারনাল লিংক: একই ওয়েবসাইটের অন্য পেজে নিয়ে যায়।
-
- এক্সটার্নাল লিংক: অন্য ওয়েবসাইটে নিয়ে যায়।
- উদাহরণ:
<a href="https://www.google.com">Google</a>
- এক্সটার্নাল লিংক: অন্য ওয়েবসাইটে নিয়ে যায়।
-
- এনকর লিংক (Anchor Link): পৃষ্ঠার নির্দিষ্ট অংশে নিয়ে যায়।
- উদাহরণ:
<a href="#section2">Go to Section 2</a>
- এনকর লিংক (Anchor Link): পৃষ্ঠার নির্দিষ্ট অংশে নিয়ে যায়।
HTML-এ হাইপারলিঙ্ক তৈরির জন্য ব্যবহৃত ট্যাগ:
-
<a>ট্যাগ: এই ট্যাগের মাধ্যমে হাইপারলিঙ্ক তৈরি করা হয়।
-
hrefঅ্যাট্রিবিউট: এটি লিংকটিকে কোথায় নিয়ে যাবে সেটি নির্দেশ করে।
VIDEO - MCQ বহুনির্বাচনি
No Content
জ্ঞানমূলক ও অনুধাবন
tel: প্রোটোকল কীভাবে কাজ করে?
ফোন নম্বরে কল শুরু করে।
title অ্যাট্রিবিউট কী?
লিঙ্কের উপর মাউস রেখে অতিরিক্ত তথ্য প্রদর্শন করে।
HTML ট্যাগের মূল উদ্দেশ্য কী?
HTML
<img> ট্যাগের উদ্দেশ্য হল একটি ওয়েব পেজে চিত্র (Image) প্রদর্শন করা।ট্যাগের কোন অ্যাট্রিবিউটটি চিত্রের উৎস নির্দেশ করে?
<img> ট্যাগের src (source) অ্যাট্রিবিউট চিত্রের উৎস বা পথ নির্দেশ করে।HTML ট্যাগের alt অ্যাট্রিবিউটের গুরুত্ব কী?
alt অ্যাট্রিবিউট চিত্রের বর্ণনা প্রদান করে যা চিত্রটি লোড না হলে প্রদর্শিত হয় এবং এটি অ্যাক্সেসিবিলিটির জন্যও গুরুত্বপূর্ণ।srcset অ্যাট্রিবিউট HTML ট্যাগে কীভাবে কাজ করে?
srcset অ্যাট্রিবিউট বিভিন্ন রেজোলিউশন এবং স্ক্রীন সাইজের জন্য বিভিন্ন চিত্র প্রদর্শন করার সুযোগ প্রদান করে।ট্যাগে width এবং height অ্যাট্রিবিউট ব্যবহারের উদ্দেশ্য কী?
width এবং height অ্যাট্রিবিউট চিত্রের আকার নির্ধারণ করতে ব্যবহৃত হয়।usemap অ্যাট্রিবিউট HTML ট্যাগে কীভাবে কাজ করে?
usemap অ্যাট্রিবিউট চিত্রের ওপর একটি ইমেজ ম্যাপ তৈরি করতে ব্যবহৃত হয়, যা চিত্রের নির্দিষ্ট জায়গাগুলিকে লিঙ্কে রূপান্তরিত করে।picture ট্যাগ কীভাবে HTML-এ চিত্র প্রদর্শনে সাহায্য করে?
picture ট্যাগ একটি বা একাধিক চিত্র ফর্ম্যাট এবং আকার নির্ধারণ করে এবং ব্রাউজারের প্রকার অনুযায়ী উপযুক্ত চিত্র প্রদর্শন করে।ট্যাগের title অ্যাট্রিবিউট কী উদ্দেশ্যে ব্যবহৃত হয়?
title অ্যাট্রিবিউট চিত্রের ওপর মাউস কার্সর রাখলে টুলটিপ হিসেবে একটি ছোট বার্তা প্রদর্শন করে।loading="lazy" অ্যাট্রিবিউট কীভাবে কাজ করে?
loading="lazy" অ্যাট্রিবিউট চিত্র লোডিং সময় বিলম্বিত করে, অর্থাৎ চিত্রটি স্ক্রীনে দৃশ্যমান হলে তখনই লোড হবে।ট্যাগের কোন অ্যাট্রিবিউটটি চিত্রের পরিমাণ বা আকার নির্ধারণ করতে ব্যবহৃত হয়?
width এবং height অ্যাট্রিবিউট চিত্রের আকার নির্ধারণ করতে ব্যবহৃত হয়।HTML হাইপারলিংক কী এবং এটি কোন ট্যাগ দিয়ে তৈরি হয়?
HTML হাইপারলিংক একটি লিঙ্ক তৈরি করতে ব্যবহৃত হয় যা ব্যবহারকারীদের এক ওয়েব পেজ থেকে অন্য ওয়েব পেজে নিয়ে যায়। এটি
<a> ট্যাগ দিয়ে তৈরি হয়।ট্যাগের href অ্যাট্রিবিউট কীভাবে কাজ করে?
href অ্যাট্রিবিউট হাইপারলিংকটির লক্ষ্য URL বা পাথ নির্ধারণ করে, যেখানে লিঙ্কটি ব্যবহারকারীকে নিয়ে যাবে।ট্যাগ কী উদ্দেশ্যে ব্যবহৃত হয়?
<a> ট্যাগ HTML-এ হাইপারলিঙ্ক তৈরি করতে ব্যবহৃত হয়, যা ব্যবহারকারীকে একটি নির্দিষ্ট URL বা পৃষ্ঠায় নিয়ে যেতে সহায়তা করে।href অ্যাট্রিবিউটের কাজ কী?
href অ্যাট্রিবিউটটি লিঙ্কের গন্তব্য URL বা পাথ নির্ধারণ করে।কীভাবে একটি HTML পৃষ্ঠায় একটি বাইরের ওয়েবসাইটে হাইপারলিঙ্ক তৈরি করা যায়?
<a href="https://www.example.com">Visit Example Website</a> এর মাধ্যমে বাইরের ওয়েবসাইটে হাইপারলিঙ্ক তৈরি করা যায়।target="_blank" অ্যাট্রিবিউটটি কি কাজ করে?
target="_blank"অ্যাট্রিবিউটটি লিঙ্কটি নতুন ট্যাবে বা উইন্ডোতে খুলে।
একটি নির্দিষ্ট অংশে লিঙ্ক করার জন্য কোন অ্যাট্রিবিউট ব্যবহার করা হয়?
একটি নির্দিষ্ট অংশে লিঙ্ক করতে
id অ্যাট্রিবিউট ব্যবহার করা হয়, এবং href="#id" এর মাধ্যমে লিঙ্ক করা হয়।কীভাবে একটি ফাইল বা ডকুমেন্ট ডাউনলোড করার জন্য হাইপারলিঙ্ক তৈরি করা যায়?
<a href="path/to/file.pdf" download>Download PDF</a> এর মাধ্যমে ফাইল ডাউনলোডের জন্য হাইপারলিঙ্ক তৈরি করা যায়।mailto: প্রোটোকলটি কী কাজে ব্যবহৃত হয়?
mailto: প্রোটোকলটি ইমেইল অ্যাড্রেসে লিঙ্ক তৈরি করতে ব্যবহৃত হয়, যা ক্লিক করলে ব্যবহারকারীর ডিফল্ট ইমেইল ক্লায়েন্টে একটি নতুন মেইল তৈরি হয়।কীভাবে একটি ইমেইল ঠিকানায় লিঙ্ক তৈরি করা যায়?
<a href="mailto:example@example.com">Send Email</a> এর মাধ্যমে একটি ইমেইল ঠিকানায় লিঙ্ক তৈরি করা যায়।rel="noopener noreferrer" কী কাজ করে এবং কেন এটি গুরুত্বপূর্ণ?
rel="noopener noreferrer" অ্যাট্রিবিউটটি নিরাপত্তা বাড়াতে ব্যবহৃত হয়, বিশেষ করে যখন লিঙ্কটি নতুন ট্যাবে খুলবে (target="_blank")। এটি ব্রাউজারকে ওপেন করা পৃষ্ঠার মধ্যে নিরাপত্তা বাধা সৃষ্টি থেকে রক্ষা করে।target="_blank" ও rel="noopener noreferrer" একসঙ্গে ব্যবহার কেন প্রয়োজন?
নিরাপত্তা ও পারফরম্যান্স উন্নত করে।
একই পৃষ্ঠার অংশে লিঙ্ক কিভাবে করা যায়?
id দিয়ে অংশ নির্ধারণ করে, href="#id" দিয়ে লিঙ্ক করা হয়।VIDEO - সৃজনশীল প্রশ্নোত্তর
No Content
<!– /wp:shortcode –>
<!– wp:paragraph –>
<p><br></p>
<!– /wp:paragraph –>
<!– wp:paragraph –>
<p></p>
<!– /wp:paragraph –>
