চতুর্থ অধ্যায়: ওয়েব ডিজাইন পরিচিতি এবং HTML

Back to Chapters

Introduction to Web Design and HTML

🌐 ৪.১ ওয়েবসাইট ও ওয়েব পেজ পরিচিতি

ওয়েব পেজ: ইন্টারনেটে প্রদর্শিত একটি একক ফাইল বা ডকুমেন্ট যা HTML দিয়ে তৈরি।
ওয়েবসাইট: পরস্পর সম্পর্কিত একাধিক ওয়েব পেজের সমষ্টি।
হোম পেজ: ওয়েবসাইটের প্রথম বা প্রধান পেজ।

ওয়েবসাইটের প্রকারভেদ:

বৈশিষ্ট্য স্ট্যাটিক ওয়েবসাইট ডায়নামিক ওয়েবসাইট
বিষয়বস্তু পরিবর্তন কোডিং ছাড়া পরিবর্তন হয় না স্বয়ংক্রিয়ভাবে পরিবর্তন হয়
ডেটাবেস ব্যবহার হয় না ব্যবহৃত হয়
ইন্টারেক্টিভিটি কম বেশি
প্রযুক্তি HTML, CSS PHP, JavaScript, ডেটাবেস
উদাহরণ ব্যক্তিগত পোর্টফোলিও Facebook, Amazon

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

  • লিনিয়ার (Linear): পেজগুলো ক্রমানুসারে সাজানো (পেজ১→পেজ২→পেজ৩)
  • ট্রি / হায়ারার্কিক্যাল: পেজগুলো স্তরে স্তরে সাজানো (সবচেয়ে বেশি ব্যবহৃত)
  • নেটওয়ার্ক: প্রতিটি পেজ অন্য সবগুলোর সাথে লিংক করা
  • হাইব্রিড: উপরের কাঠামোর সমন্বয়

🔗 ৪.২ ওয়েব সম্পর্কিত গুরুত্বপূর্ণ ধারণা

ধারণা পূর্ণরূপ বিবরণ
WWW World Wide Web ইন্টারনেটে পরস্পর সংযুক্ত ওয়েব পেজের সমষ্টি। জনক: টিম বার্নার্স লি (১৯৮৯, CERN)
URL Uniform Resource Locator ওয়েব পেজের নির্দিষ্ট ঠিকানা
HTTP Hyper Text Transfer Protocol ওয়েব পেজ আদান-প্রদানের প্রটোকল
IP Address Internet Protocol Address ইন্টারনেটে প্রতিটি ডিভাইসের অদ্বিতীয় সংখ্যাগত ঠিকানা
Domain Name — IP-র মানবপাঠযোগ্য নাম (google.com)
DNS Domain Name System ডোমেইন নেমকে IP-তে রূপান্তর করে
FTP File Transfer Protocol সার্ভারে ফাইল আপলোড/ডাউনলোড প্রটোকল
Hosting — ওয়েবসাইটকে সার্ভারে রেখে সবার কাছে উন্মুক্ত করা
📍 ওয়েব ব্রাউজার vs সার্চ ইঞ্জিন:
ব্রাউজার: ওয়েব পেজ দেখার সফটওয়্যার (Chrome, Firefox, Edge)
সার্চ ইঞ্জিন: ওয়েবে তথ্য খোঁজার সেবা (Google, Bing, Yahoo)

📝 ৪.৩ HTML পরিচিতি

সংজ্ঞা: HTML (Hyper Text Markup Language) হলো ওয়েব পেজ তৈরির জন্য ব্যবহৃত স্ট্যান্ডার্ড মার্কআপ ভাষা। এটি কোনো প্রোগ্রামিং ভাষা নয়, মার্কআপ ভাষা।

HTML ডকুমেন্টের মৌলিক কাঠামো:

<!DOCTYPE html> <html> <head> <title>পেজের শিরোনাম</title> </head> <body> মূল বিষয়বস্তু এখানে থাকে </body> </html>
📍 মনে রাখুন:
• <!DOCTYPE html> — HTML5 ডিক্লারেশন
• <head> — মেটা তথ্য, টাইটেল (ব্রাউজারে দেখায় না)
• <title> — ব্রাউজার ট্যাবে শিরোনাম দেখায়
• <body> — মূল কন্টেন্ট (ব্রাউজারে দেখায়)
• HTML ফাইলের এক্সটেনশন: .html বা .htm

🏷️ ৪.৪ HTML ট্যাগ ও অ্যাট্রিবিউট

ট্যাগের প্রকারভেদ:

ধরন বিবরণ উদাহরণ
কন্টেইনার ট্যাগ (Paired) ওপেনিং ও ক্লোজিং ট্যাগ আছে <b>...</b>, <p>...</p>
এম্পটি ট্যাগ (Unpaired) ক্লোজিং ট্যাগ নেই <br>, <hr>, <img>

✍️ ৪.৫ টেক্সট ফরম্যাটিং ট্যাগ

কাজ ট্যাগ বিবরণ
হেডিং <h1> — <h6> h1 সবচেয়ে বড়, h6 সবচেয়ে ছোট
প্যারাগ্রাফ <p> অনুচ্ছেদ তৈরি
বোল্ড <b> / <strong> গাঢ় লেখা
ইটালিক <i> / <em> বাঁকা লেখা
আন্ডারলাইন <u> নিচে দাগ
লাইন ব্রেক <br> নতুন লাইন (এম্পটি ট্যাগ)
অনুভূমিক রেখা <hr> Horizontal Rule (এম্পটি ট্যাগ)
সুপারস্ক্রিপ্ট <sup> উপরে ছোট (x²)
সাবস্ক্রিপ্ট <sub> নিচে ছোট (H₂O)
উদাহরণ:
<p>এটি একটি <b>গাঢ়</b> শব্দ।</p>
H<sub>2</sub>O → H₂O
x<sup>2</sup> → x²

🔗 ৪.৬ হাইপারলিংক ও ইমেজ

হাইপারলিংক:

<a href="URL" target="_blank">লিংক টেক্সট</a>
  • href — গন্তব্য URL (বাধ্যতামূলক অ্যাট্রিবিউট)
  • target="_blank" — নতুন ট্যাবে ওপেন
  • target="_self" — বর্তমান ট্যাবেই ওপেন (ডিফল্ট)

ইমেজ:

<img src="photo.jpg" alt="বিবরণ" width="300" height="200">
  • src — ছবির ফাইল পাথ (বাধ্যতামূলক)
  • alt — ছবি লোড না হলে বিকল্প টেক্সট
  • width, height — ছবির আকার
📍 মনে রাখুন: <img> একটি এম্পটি ট্যাগ — এর কোনো ক্লোজিং ট্যাগ নেই।

📋 ৪.৭ লিস্ট (List)

ধরন ট্যাগ চিহ্ন বিবরণ
Ordered List <ol> 1, 2, 3... ক্রমিক সংখ্যাযুক্ত তালিকা
Unordered List <ul> • বুলেট বুলেট পয়েন্ট তালিকা
Definition List <dl> — শব্দ ও তার সংজ্ঞা
List Item <li> — ol/ul-এর প্রতিটি আইটেম
উদাহরণ — Ordered List:
<ol> <li>বাংলা</li> <li>ইংরেজি</li> <li>গণিত</li> </ol>
ফলাফল: 1. বাংলা, 2. ইংরেজি, 3. গণিত

📊 ৪.৮ টেবিল (Table)

টেবিলের গঠন:

ট্যাগ কাজ
<table> টেবিল তৈরি করে (প্রধান ট্যাগ)
<tr> Table Row — সারি তৈরি করে
<th> Table Header — হেডিং সেল (বোল্ড ও সেন্টার)
<td> Table Data — সাধারণ ডেটা সেল

সেল মার্জিং:

  • colspan="2" — পাশাপাশি ২টি কলাম একত্রিত (Column Span)
  • rowspan="2" — উপর-নিচ ২টি রো একত্রিত (Row Span)
  • cellpadding — সেলের কন্টেন্ট ও বর্ডারের মাঝে দূরত্ব
  • cellspacing — সেল ও সেলের মাঝে দূরত্ব
টেবিল উদাহরণ:
<table border="1"> <tr> <th>নাম</th> <th>রোল</th> </tr> <tr> <td>রহিম</td> <td>০১</td> </tr> </table>

🎨 ৪.৯ CSS পরিচিতি

সংজ্ঞা: CSS (Cascading Style Sheets) হলো ওয়েব পেজের স্টাইলিং বা সাজানোর ভাষা। HTML দিয়ে কাঠামো তৈরি হয়, CSS দিয়ে রং, ফন্ট, লেআউট নিয়ন্ত্রণ করা হয়।

CSS প্রয়োগের ৩টি পদ্ধতি:

পদ্ধতি বিবরণ উদাহরণ
Inline CSS সরাসরি HTML ট্যাগে style অ্যাট্রিবিউট <p style="color:red">
Internal CSS <head>-এ <style> ট্যাগের মধ্যে <style> p { color: red; } </style>
External CSS আলাদা .css ফাইল লিংক করা <link rel="stylesheet" href="style.css">
📍 সেরা পদ্ধতি: External CSS সবচেয়ে ভালো কারণ একটি CSS ফাইল দিয়ে একাধিক HTML পেজ স্টাইল করা যায় এবং কোড পরিচ্ছন্ন থাকে।

📝 গুরুত্বপূর্ণ সংক্ষিপ্ত প্রশ্ন

  1. WWW-এর জনক কে? — টিম বার্নার্স লি।
  2. HTML এর পূর্ণরূপ কী? — Hyper Text Markup Language।
  3. HTML ফাইলের এক্সটেনশন কী? — .html বা .htm।
  4. সবচেয়ে বড় হেডিং ট্যাগ কোনটি? — <h1>।
  5. এম্পটি ট্যাগের উদাহরণ দিন। — <br>, <hr>, <img>।
  6. হাইপারলিংক তৈরিতে কোন ট্যাগ ব্যবহৃত হয়? — <a> ট্যাগ।
  7. <a> ট্যাগের অপরিহার্য অ্যাট্রিবিউট কোনটি? — href।
  8. <img> ট্যাগে কোন অ্যাট্রিবিউট ছবির উৎস নির্দেশ করে? — src।
  9. Unordered List তৈরিতে কোন ট্যাগ ব্যবহৃত হয়? — <ul>।
  10. colspan কী কাজ করে? — পাশাপাশি সেল একত্রিত করে।
📋 MCQ অনুশীলন করুন