HOME HTML কোড ও ওয়েব ডিজাইন
দৃশ্যকল্প-১:
A Sample Table
ICTHSC Exam-2025
MCQCQ

দৃশ্যকল্প-২:
Vegetables
Fruits
iv. Ripe
v. Dried
Sylhet • 2025
ক) ফ্রন্ট-এন্ড ডেভেলপমেন্ট কী?
খ) ট্যাগ ও অ্যাট্রিবিউট উদাহরণসহ ব্যাখ্যা কর।
গ) উদ্দীপকের দৃশ্যকল্প-১ এর ন্যায় ব্রাউজারে ফলাফল পেতে HTML কোড লেখ।
ঘ) উদ্দীপকের দৃশ্যকল্প-২ এর HTML কোড লেখ, সেখানে Fruits এ ক্লিক করলে www.fruitbox.com ওয়েবসাইটটি নতুন একটি ট্যাবে খুলবে।

সমাধান (Solution)

ক) ফ্রন্ট-এন্ড ডেভেলপমেন্ট কী?
ফ্রন্ট-এন্ড ডেভেলপমেন্ট হলো একটি ওয়েবসাইটের সেই অংশ তৈরি করা যা ব্যবহারকারী সরাসরি দেখতে পান এবং যার সাথে ইন্টারঅ্যাক্ট করতে পারেন। এটি মূলত HTML, CSS এবং JavaScript ব্যবহার করে সম্পন্ন করা হয়।

খ) ট্যাগ ও অ্যাট্রিবিউট উদাহরণসহ ব্যাখ্যা কর।
HTML ট্যাগ হলো কি-ওয়ার্ড যা কন্টেন্টের ধরন নির্ধারণ করে এবং এটি এঙ্গেল ব্র্যাকেট (যেমন: <p>) দিয়ে ঘেরা থাকে। অন্যদিকে, অ্যাট্রিবিউট ট্যাগের অতিরিক্ত তথ্য প্রদান করে যা সর্বদা ওপেনিং ট্যাগে থাকে। উদাহরণস্বরূপ: <a href="www.google.com"> এখানে <a> হলো ট্যাগ এবং href হলো একটি অ্যাট্রিবিউট। এটি ট্যাগের কার্যকারিতা নির্দিষ্ট করতে সাহায্য করে।

গ) উদ্দীপকের দৃশ্যকল্প-১ এর HTML কোড
নিচে উদ্দীপকের টেবিলটি তৈরির জন্য প্রয়োজনীয় কোড দেওয়া হলো:

<table border="1">
<caption>A Sample Table</catption>
<tr>
<td rowspan="2">ICT</td>
<td colspan="2">HSC Exam-2025</td>
</tr>
<tr>
<td>MCQ</td>
<td align="right">CQ</td>
</tr>
</table>

ঘ) উদ্দীপকের দৃশ্যকল্প-২ এর HTML কোড (হাইপারলিংকসহ)
দৃশ্যকল্প-২ এর লিস্ট এবং শর্তানুযায়ী নতুন ট্যাবে ওয়েবসাইট খোলার কোড নিচে দেওয়া হলো:

<ul>
<li>Vegetables</li>
<li>
<a href="https://www.fruitbox.com" target="_blank">Fruits</a>
<ol type="i" start="4">
<li>Ripe</li>
<li>Dried</li>
</ol>
</li>
</ul>

ব্যাখ্যা:
১. দৃশ্যকল্প-২ এ একটি নেস্টেড লিস্ট ব্যবহার করা হয়েছে যেখানে বাইরের লিস্টটি আনঅর্ডারড (<ul>)।
২. Fruits-এ ক্লিক করলে নতুন ট্যাবে ওয়েবসাইটটি খোলার জন্য target="_blank" অ্যাট্রিবিউট ব্যবহার করা হয়েছে।
৩. সাব-লিস্টটি রোমান ছোট হাতের অক্ষরে এবং ৪ নম্বর থেকে শুরু করার জন্য type="i" এবং start="4" ব্যবহার করা হয়েছে।