HSC ICT Hand Note Chapter 04 (HSC ICT ৪র্থ অধ্যায়ের হ্যান্ড নোট)

এইচএসসি আইসিটি চতুর্থ অধ্যায়: ওয়েব ডিজাইন পরিচিতি এবং HTML মূলত একটি ব্যবহারিক বা প্র্যাকটিক্যাল নির্ভর অধ্যায়। এখান থেকে পরীক্ষায় নিশ্চিতভাবে একটি সৃজনশীল প্রশ্ন থাকে। নিচে এর একটি গোছানো হ্যান্ড নোট দেওয়া হলো:

আরো পড়ুন >> HSC ICT Hand Note Chapter 03 (HSC ICT ৩য় অধ্যায়ের হ্যান্ড নোট)।

HSC ICT Hand Note



চতুর্থ অধ্যায়ের মূল বিষয়বস্তু (Key Topics)

১. ওয়েব পেজ বনাম ওয়েবসাইট

  • ওয়েব পেজ: ইন্টারনেটে থাকা কোনো একক ডকুমেন্ট।

  • ওয়েবসাইট: অনেকগুলো সম্পর্কিত ওয়েব পেজের সমষ্টি।

  • আইপি অ্যাড্রেস: ইন্টারনেটে প্রতিটি কম্পিউটারের অনন্য ঠিকানা। যেমন: $172.217.22.14$

  • ডোমেইন নেম: আইপি অ্যাড্রেসের গাণিতিক রূপ মনে রাখা কঠিন বলে এর যে ইংরেজি নাম দেওয়া হয়। যেমন: www.google.com

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

একটি ওয়েবসাইট কীভাবে সাজানো থাকে তার ওপর ভিত্তি করে এটি ৪ প্রকার:

  • লিনিয়ার: একটার পর একটা পেজ আসে (Next/Previous)।

  • ট্রি বা হায়ারার্কিকাল: হোম পেজ থেকে সাব-পেজ এবং সেখান থেকে আরও পেজ (সবচেয়ে জনপ্রিয়)।

  • নেটওয়ার্ক বা মেশ: প্রতিটি পেজ প্রতিটি পেজের সাথে যুক্ত থাকে।

  • হাইব্রিড: উপরের একাধিক কাঠামোর মিশ্রণ।

৩. HTML-এর মৌলিক ধারণা

HTML (HyperText Markup Language) কোনো প্রোগ্রামিং ভাষা নয়, এটি একটি মার্কআপ ভাষা।

  • ট্যাগ (Tag): এটি কি-ওয়ার্ড যা < > চিহ্নের মধ্যে থাকে। যেমন: <html>, <body>

  • সিনট্যাক্স: <tagname> Content </tagname>

  • এমপ্টি ট্যাগ (Empty Tag): যে সব ট্যাগের শুরু আছে কিন্তু শেষ নেই। যেমন: <br> (ব্রেক), <img> (ছবি), <hr> (লাইন)।

৪. গুরুত্বপূর্ণ HTML ট্যাগসমূহ

ট্যাগকাজ
<h1> থেকে <h6>হেডিং বা শিরোনাম (h1 সবচেয়ে বড়)
<p>প্যারাগ্রাফ তৈরির জন্য
<a>হাইপারলিঙ্ক (অন্য পেজে যাওয়ার জন্য)
<img>ছবি যুক্ত করার জন্য
<ul>, <li>আন-অর্ডারড লিস্ট (বুলেট পয়েন্ট)
<ol>, <li>অর্ডারড লিস্ট (১, ২, ৩...)
<table>টেবিল তৈরির জন্য

HTML-এর একটি বেসিক ফরম্যাট

HTML
<!DOCTYPE html>
<html>
<head>
    <title>আমার পেজ</title>
</head>
<body>
    <h1>হ্যালো বাংলাদেশ!</h1>
    <p>এটি আমার প্রথম ওয়েব পেজ।</p>
    <a href="https://www.google.com">গুগলে যান</a>
</body>
</html>
পরীক্ষার জন্য জরুরি কিছু টপিক
হাইপারলিঙ্ক (Hyperlink)
সিনট্যাক্স: <a href="URL"> Link Text </a>
  • এখানে href হলো একটি অ্যাট্রিবিউট যার অর্থ Hypertext Reference।
ছবি যুক্ত করা (Adding Image)
সিনট্যাক্স: <img src="image.jpg" width="500" height="600" alt="বিকল্প নাম">
  • এখানে src হলো Source এবং alt হলো ছবি লোড না হলে যে লেখা দেখাবে।
টেবিল তৈরি (Table)
টেবিল তৈরির জন্য ৩টি ট্যাগ খুব গুরুত্বপূর্ণ:
  • <tr>: Table Row (সারি)
  • <th>: Table Header (শিরোনাম)
  • <td>: Table Data (তথ্যাবলি)
ওয়েবসাইট পাবলিশিংয়ের ধাপসমূহ
একটি ওয়েবসাইট তৈরি করে ইন্টারনেটে সবার জন্য উন্মুক্ত করতে মূলত ৪টি ধাপ অনুসরণ করতে হয়:
১. ডোমেইন নেম রেজিস্ট্রেশন: ওয়েবসাইটের একটি নাম কেনা (যেমন: .com, .org, .edu)।
২. ওয়েব হোস্টিং: ওয়েবসাইটটিকে ২৪ ঘণ্টা সচল রাখার জন্য কোনো সার্ভারে জায়গা কেনা।
৩. সার্চ ইঞ্জিন অপটিমাইজেশন (SEO): গুগল বা বিং-এর মতো সার্চ ইঞ্জিনে যেন ওয়েবসাইটটি 
সহজে খুঁজে পাওয়া যায় তার ব্যবস্থা করা।
৪. সাইট পাবলিশিং: হোস্টিং সার্ভারে ফাইলগুলো আপলোড করা।
স্ট্যাটিক বনাম ডাইনামিক ওয়েবসাইট
পরীক্ষায় এই দুইটির পার্থক্য প্রায়ই আসে:
বৈশিষ্ট্যস্ট্যাটিক ওয়েবসাইট (Static)ডাইনামিক ওয়েবসাইট (Dynamic)
কন্টেন্টপরিবর্তন হয় না (স্থির)।ব্যবহারকারী ভেদে পরিবর্তন হয়।
ডাটাবেজসাধারণত ডাটাবেজ থাকে না।ডাটাবেজ থাকে।
ভাষাশুধু HTML, CSS দিয়ে তৈরি।PHP, Python, ASP.net প্রয়োজন।
লোড টাইমখুব দ্রুত লোড হয়।কিছুটা বেশি সময় নেয়।
টেবিল ট্যাগের গুরুত্বপূর্ণ অ্যাট্রিবিউট
সৃজনশীল প্রশ্নের ঘ-গ বিভাগে টেবিল কোডিং করতে গেলে এই দুটি জিনিস সবচেয়ে বেশি লাগে:
  • Colspan: একাধিক কলামকে একত্রিত করতে ব্যবহৃত হয়।
  • Rowspan: একাধিক রো বা সারিকে একত্রিত করতে ব্যবহৃত হয়।
উদাহরণ (Colspan): <td colspan="2">রেজাল্ট</td> (এটি দুটি কলামের জায়গা একাই নেবে)।
ইউআরএল (URL) এর অংশসমূহ
একটি পূর্ণাঙ্গ URL (Uniform Resource Locator) এর কয়েকটি অংশ থাকে। 
যেমন: https://www.google.com/images
  • https: প্রোটোকল (Protocol)
  • www: হোস্ট নেম/সাব-ডোমেইন
  • google: ডোমেইন নেম
  • .com: টপ লেভেল ডোমেইন (TLD)
  • /images: পাথ বা ডিরেক্টরি (Path)
বোনাস টিপস: কালার কোড
HTML-এ কালার কোড লেখার পদ্ধতি হলো Hexadecimal পদ্ধতি। 
এটি # দিয়ে শুরু হয় এবং ৬টি ডিজিট থাকে (RRGGBB)।
  • লাল: #FF0000
  • সবুজ: #00FF00
  • নীল: #0000FF
  • সাদা: #FFFFFF
  • কালো: #000000
keyword research
ict 1st chapter mcq
আইসিটি ১ম অধ্যায় mcq
hsc ict chapter 1 জ্ঞানমূলক প্রশ্ন
ict প্রথম অধ্যায় সৃজনশীল প্রশ্ন ও উত্তর
আইসিটি ১ম অধ্যায় সৃজনশীল প্রশ্ন ও উত্তর
hsc ict 1st chapter mcq
hsc ict chapter 1 mcq
আইসিটি ১ম অধ্যায় সৃজনশীল
ict প্রথম অধ্যায় mcq উত্তর ২০২৪
একাদশ শ্রেণির আইসিটি প্রথম অধ্যায় mcq প্রশ্ন উত্তর
আইসিটি প্রথম অধ্যায় জ্ঞানমূলক pdf
আইসিটি প্রথম অধ্যায় জ্ঞানমূলক
hsc ict সৃজনশীল প্রশ্ন ও উত্তর pdf
ict প্রথম অধ্যায় সৃজনশীল প্রশ্ন ও উত্তর pdf
আইসিটি ১ম অধ্যায় অনুধাবনমূলক প্রশ্ন
একাদশ শ্রেণির তথ্য ও যোগাযোগ প্রযুক্তি প্রথম অধ্যায় pdf
ict 1st chapter
আইসিটি সৃজনশীল প্রশ্ন ও উত্তর ২০২৩ pdf
তথ্য ও যোগাযোগ প্রযুক্তি ১ম অধ্যায় সৃজনশীল প্রশ্ন ও উত্তর
আইসিটি ৫ম অধ্যায় জ্ঞানমূলক
আপডেট তথ্যাবলি
প্রথম প্রকাশিত হয় ৮ই ফেব্রুয়ারি ২০২৬