B
Biggan.me
বিজ্ঞান ও গণিত ক্যালকুলেটর
🌐English
তথ্য ও যোগাযোগ প্রযুক্তি (HSC ICT)NCTB এইচএসসি আইসিটি (অধ্যায় ৪)ওয়েব ডিজাইন পরিচিতি এবং HTMLটেবিল ও ফর্মবোর্ড CQ স্পেশাল

এইচটিএমএল (HTML) কোড এডিটর ও রানার

এইচএসসি আইসিটি ৪র্থ অধ্যায়ের জন্য লাইভ HTML কোড এডিটর ও রানার। জটিল টেবিল (rowspan/colspan), ফর্ম ডিজাইন, ওয়েবসাইট কাঠামো এবং বোর্ড পরীক্ষার CQ সমাধানের রিয়েল-টাইম প্লেগ্রাউন্ড।

ক্যালকুলেটরসূত্র ও নিয়মবোর্ড উদাহরণকাসিও fx-991 গাইডব্যবহারিক প্রয়োগপ্রশ্নোত্তর
নমুনা কোড:
HTML / CSS Source1109 chars • UTF-8
লাইভ প্রিভিউ উইন্ডো
● LIVEDESKTOP
https://localhost/hsc_board_preview.html

ফর্মুলা ও ডেরিভেশন

তাত্ত্বিক ভিত্তি, একক বিশ্লেষণ ও সমীকরণের ভৌত সীমাবদ্ধতা

১. ওয়ার্ল্ড ওয়াইড ওয়েব (WWW) ও HTML-এর ইতিহাস

১৯৮৯ সালে সুইজারল্যান্ডের সার্ন (CERN)-এ কর্মরত ব্রিটিশ পদার্থবিদ টিম বার্নার্স-লি (Tim Berners-Lee) বিশ্বব্যাপী বিজ্ঞানীদের মধ্যে গবেষণা তথ্য বিনিময়ের সুবিধার্থে ওয়ার্ল্ড ওয়াইড ওয়েব (WWW) আবিষ্কার করেন। পরবর্তীতে ১৯৯০ সালে তিনি ওয়েব পেজ প্রদর্শনের জন্য HTML (HyperText Markup Language) উদ্ভাবন করেন। ১৯৯৩ সালে মার্ক অ্যান্ড্রিসেন প্রথম গ্রাফিক্যাল ব্রাউজার Mosaic তৈরি করেন এবং ১৯৯৪ সালে টিম বার্নার্স-লি W3C (World Wide Web Consortium) প্রতিষ্ঠা করেন। বর্তমানে HTML5 হলো ইন্টারনেটের সার্বজনীন আদর্শ সংস্করণ।

২. স্ট্যাটিক (Static) বনাম ডায়নামিক (Dynamic) ওয়েব পেজ তুলনা

বৈশিষ্ট্য / তুলনার বিষয়স্ট্যাটিক ওয়েব পেজ (Static)ডায়নামিক ওয়েব পেজ (Dynamic)
কন্টেন্ট পরিবর্তননির্দিষ্ট, ব্রাউজারে দ্রুত লোড হয় কিন্তু সরাসরি বদলায় না।ব্যবহারকারী ও সময়ের সাথে ডেটা পরিবর্তনশীল।
ব্যবহৃত ভাষাHTML, CSS, ক্লায়েন্ট-সাইড JSPHP, Python, Node.js, ASP.NET
ডেটাবেজ সংযোগকোনো ডেটাবেজ সংযোগ প্রয়োজন হয় না।MySQL, PostgreSQL বা MongoDB ডেটাবেজ অপরিহার্য।
বিকাশ খরচ ও নিরাপত্তাকম ব্যয়বহুল ও উচ্চ নিরাপত্তা সম্পন্ন।তুলনামূলক বেশি ব্যয় ও রক্ষণাবেক্ষণ প্রয়োজন।

৩. ওয়েবসাইটের কাঠামো (Website Structures)

ওয়েব পেজগুলোর পারস্পরিক লিংকিং পদ্ধতির উপর ভিত্তি করে কাঠামোকে ৪ ভাগে ভাগ করা হয়:

১. লিনিয়ার / সিকোয়েন্সিয়াল (Linear):

পেজগুলো ক্রমানুসারে একটির পর একটি (Next / Previous) সাজানো থাকে। যেমন: অনলাইন টিউটোরিয়াল বা বই।

২. ট্রি / হায়ারার্কিক্যাল (Tree / Hierarchical):

হোম পেজ থেকে শাখা-প্রশাখায় সাব-মেনু বিভক্ত থাকে। অধিকাংশ প্রাতিষ্ঠানিক ও শিক্ষাবোর্ড ওয়েবসাইট এই ধরনের।

৩. নেটওয়ার্ক / ওয়েব-লিঙ্কড (Network):

সবগুলো পেজ পরস্পরের সাথে সরাসরি সংযুক্ত থাকে। ফলে যেকোনো পেজ থেকে যেকোনো পেজে যাওয়া যায়।

৪. হাইব্রিড / কম্বিনেশন (Hybrid):

একাধিক কাঠামোর (যেমন ট্রি ও লিনিয়ার) সমন্বয়ে গঠিত জটিল আধুনিক ওয়েব পোর্টাল।

৪. এইচটিএমএল টেবিল কাঠামো ও মার্জিং নিয়মাবলী (Rowspan ও Colspan)

এইচএসসি বোর্ড পরীক্ষায় ৪র্থ অধ্যায় থেকে প্রতি বছর সৃজনশীল প্রশ্নে একটি জটিল টেবিলের দৃশ্যপট থাকে। টেবিল নির্ভুলভাবে তৈরি করার নিয়ম:

রো মার্জিং (Rowspan):

যখন কোনো একটি সেলের তথ্য উল্লম্বভাবে নিচের সারিতেও একই থাকে, তখন প্রথম সেলে <td rowspan="n"> লিখতে হয় এবং পরবর্তী n-1 টি সারি (Row) থেকে ওই সেলটি বাদ দিতে হয়।

কলাম মার্জিং (Colspan):

যখন একটি হেডার বা সেল অনুভূমিকভাবে পাশাপাশি একাধিক কলাম জুড়ে বিস্তৃত হয়, তখন <th colspan="n"> ব্যবহার করা হয় এবং একই সারির মোট সেলের সংখ্যা হ্রাস পায়।

৫. ওয়েবসাইট পাবলিশিং-এর ৩টি মৌলিক ধাপ

ধাপ ১: ডোমেইন নিবন্ধন

ICANN অনুমোদিত রেজিস্ট্রারের মাধ্যমে ওয়েবসাইটের অনন্য নাম (যেমন: biggan.me) নিবন্ধন করা।

ধাপ ২: ওয়েব হোস্টিং ক্রয়

ইন্টারনেটে সার্বক্ষণিক সংযুক্ত ওয়েব সার্ভারে পেজ ও ডেটাবেজ সংরক্ষণের জন্য মেমোরি স্পেস ভাড়া নেওয়া।

ধাপ ৩: ফাইল আপলোড (FTP)

FileZilla বা Git-এর মাধ্যমে লোকাল কম্পিউটার থেকে HTML/CSS ফাইল সার্ভারে স্থানান্তর ও সার্চ ইঞ্জিনে সাবমিট করা।

সলভড টেক্সটবুক এক্সাম্পল

পাঠ্যবই, অলিম্পিয়াড ও বিগত বোর্ড পরীক্ষার হুবহু সমাধানকৃত ৩টি মানসম্পন্ন অংক

সহজ / মৌলিক ধারণাbg-emerald-500/10 text-emerald-400 border border-emerald-500/20
একটি সাধারণ HTML ওয়েব পেজ তৈরি করো যাতে একটি প্রধান শিরোনাম <h1> এবং একটি অনুচ্ছেদ <p> থাকবে।
দেওয়া আছে (Given Data):
  • শিরোনাম: HSC ICT Class 2026
  • অনুচ্ছেদ: Welcome to Web Design Chapter
সমাধানের ধাপসমূহ:
<!DOCTYPE html> দিয়ে ডকুমেন্টের প্রকার নির্ধারণ করো।
<html> ও <head> ট্যাগের ভেতরে <title> পেজের নাম সেট করো।
<body> ট্যাগের ভেতরে <h1> ও <p> ট্যাগ ব্যবহার করো।
উত্তর:<h1>HSC ICT Class 2026</h1><p>Welcome to Web Design Chapter</p>
বোর্ড পরীক্ষা স্পেশাল (CQ গ/ঘ)bg-cyan-500/10 text-cyan-400 border border-cyan-500/20
একটি টেবিল তৈরি করো যাতে ৩টি কলাম থাকবে (Roll, Subject, Marks)। ২য় রো-তে Marks কলামটি অনুভূমিকভাবে ২টি কলাম (Theory, Practical) জুড়ে থাকবে।
দেওয়া আছে (Given Data):
  • কলাম সংখ্যা: ৩টি
  • প্রয়োজনীয় অ্যাট্রিবিউট: colspan="2"
সমাধানের ধাপসমূহ:
<table> ট্যাগ শুরু করে border="1" নির্ধারণ করো।
প্রথম রো-তে <th>Roll</th>, <th>Subject</th> এবং <th colspan="2">Marks</th> লেখো।
দ্বিতীয় রো-তে সাব-হেডার হিসেবে <th>Theory</th> ও <th>Practical</th> যোগ করো।
উত্তর:<th colspan="2">Marks</th> দিয়ে কলাম মার্জ সফলভাবে সম্পন্ন হয়।
ভর্তি পরীক্ষা ও বাস্তব প্রয়োগbg-purple-500/10 text-purple-400 border border-purple-500/20
একটি অনলাইন ছাত্র ভর্তি ফর্মের জন্য HTML কোড লিখো যাতে নাম নেওয়ার টেক্সট ফিল্ড ও সাইন্স/আর্টস নির্বাচনের রেডিও বাটন থাকবে।
দেওয়া আছে (Given Data):
  • ফর্ম ট্যাগ: <form>
  • ইনপুট টাইপ: text ও radio
সমাধানের ধাপসমূহ:
<form action="#" method="POST"> দিয়ে ফর্ম শুরু করো।
<input type="text" name="name"> দিয়ে নাম ফিল্ড তৈরি করো।
গ্রুপ নির্বাচনের জন্য একই name="group" দিয়ে দুটি radio বাটন তৈরি করো যাতে যেকোনো একটি সিলেক্ট করা যায়।
উত্তর:<input type="radio" name="group" value="science"> Science

বোর্ড পরীক্ষা ও ল্যাব চেকলিস্ট

✓ একক রূপান্তর (SI Units)গণনার পূর্বে সকল মানকে SI এককে নিয়ে নিন।
✓ সূত্র ও পক্ষান্তর উল্লেখখাতায় মূল সূত্র লিখে লক্ষ্য চলককে আলাদা করুন।
✓ তাৎপর্যপূর্ণ অঙ্ক ও রাউন্ডিংচূড়ান্ত ফলাফলে ২ বা ৩ দশমিক স্থান পর্যন্ত রাউন্ড করুন।

প্র্যাকটিক্যাল অ্যাপ্লিকেশনস

শিল্প-কারখানা, ওষুধ প্রস্তুতি, প্রকৌশল ও আধুনিক গবেষণায় প্রয়োগ

HTML5 ও CSS3 হলো বর্তমান বিশ্বের সকল ডিজিটাল ইন্টারফেসের মেরুদণ্ড। আধুনিক প্রযুক্তি জগতে শুধু সাধারণ ওয়েবসাইট নির্মাণ নয়, বরং অ্যান্ড্রয়েড ও আইওএস হাইব্রিড মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্ট (React Native, Capacitor), ইমেইল মার্কেটিং টেমপ্লেট ডিজাইন, ইন্টারঅ্যাক্টিভ ড্যাশবোর্ড এবং ক্লাউড সফটওয়্যারের ফ্রন্টএন্ড তৈরিতে এটি অপরিহার্য। শিক্ষার্থীদের জন্য বিগ্গান.মি-র এই ইন্টারঅ্যাক্টিভ রানারে প্র্যাকটিস করে বোর্ড পরীক্ষার খাতায় নির্ভুল কোডিং ও ভবিষ্যতের সফটওয়্যার ক্যারিয়ারের শক্ত ভিত্তি গড়া সম্ভব।

ফ্রিকোয়েন্টলি আস্কড কোয়েশ্চেনস (FAQ)

শিক্ষার্থীদের সচরাচর ভুল ও গুরুত্বপূর্ণ প্রশ্নের একাডেমিক উত্তর

rowspan এবং colspan এর মধ্যে মূল পার্থক্য কী?▼
rowspan উল্লম্বভাবে (উপর-নিচ) একাধিক রো বা সারির সেল একত্রিত (merge) করতে ব্যবহৃত হয়। অপরদিকে colspan অনুভূমিকভাবে (পাশাপাশি) একাধিক কলামের সেল একত্রিত করতে ব্যবহৃত হয়।
HTML ট্যাগ এবং অ্যাট্রিবিউট এর মধ্যে তফাৎ কী?▼
ট্যাগ হলো HTML এলিমেন্টের নির্দেশক (যেমন <table>, <a>), আর অ্যাট্রিবিউট হলো ট্যাগের অতিরিক্ত বৈশিষ্ট্য বা মান (যেমন border="1", href="url")।
কন্টেইনার ট্যাগ এবং এম্পটি ট্যাগ কী?▼
যেসব ট্যাগের শুরুর (<tag>) এবং শেষের (</tag>) অংশ থাকে তাকে কন্টেইনার ট্যাগ বলে (যেমন <p>...</p>)। আর যেসব ট্যাগের কোনো শেষ ট্যাগ থাকে না তাদের এম্পটি ট্যাগ বলে (যেমন <br>, <img>, <hr>)।