এইচএসসি আইসিটি বইয়ের চতুর্থ অধ্যায় “ওয়েব ডিজাইন পরিচিতি এবং HTML”-এর মৌলিক ধারণাগুলি পরিচিতি দেয়। অধ্যায়টি প্রথমে ওয়েব ডিজাইনের মূল উপাদানগুলির পরিচয় প্রদান করে, যা একটি কার্যকরী ওয়েবসাইট তৈরি করার জন্য অপরিহার্য। এখানে ওয়েব ডিজাইন বলতে বোঝানো হয়েছে একটি ওয়েব পেজের লেআউট, স্টাইল, এবং কন্টেন্টের সঠিক সংমিশ্রণ, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

এরপর HTML (Hypertext Markup Language) সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে। HTML একটি মার্কআপ ভাষা যা ওয়েব পেজের স্ট্রাকচার এবং কনটেন্ট নির্ধারণ করে। অধ্যায়টিতে HTML-এর মৌলিক ট্যাগ এবং তাদের ব্যবহারের পদ্ধতি সম্পর্কে বর্ণনা করা হয়েছে। যেমন, <html>, <head>, <body>, <h1>, <p>, এবং <a> ট্যাগগুলো কীভাবে ব্যবহৃত হয় তা উল্লেখ করা হয়েছে। এছাড়া, HTML-এর মাধ্যমে কিভাবে টেক্সট, ছবি, লিংক এবং অন্যান্য মিডিয়া উপাদান যুক্ত করা যায়, তা বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে। এই অধ্যায়টি শিক্ষার্থীদের ওয়েব ডিজাইন এবং HTML-এর ভিত্তিতে কার্যকরী ওয়েবসাইট তৈরির জন্য প্রয়োজনীয় জ্ঞান প্রদান করে।

১. ওয়েব ডিজাইন পরিচিতি:

1. ওয়েব ডিজাইন: ওয়েবসাইট তৈরির প্রক্রিয়া যা গ্রাফিক ডিজাইন, লেআউট, এবং ইউজার ইন্টারফেসের ডিজাইন অন্তর্ভুক্ত করে।

• ওয়েবসাইটের মৌলিক উপাদান:

• ওয়েব পেজ: ইন্টারনেটে প্রদর্শিত একটি একক পৃষ্ঠা।
• ওয়েবসাইট: একাধিক ওয়েব পেজের সমাহার যা একটি সাধারণ ডোমেইনে হোস্ট করা হয়।

• ওয়েব ডিজাইনের লক্ষ্য:

1. ইউজার এক্সপেরিয়েন্স (UX): ব্যবহারকারীদের সন্তুষ্টি এবং সহজ ইউজার ইন্টারফেস তৈরি করা।
2. রেসপনসিভ ডিজাইন: বিভিন্ন ডিভাইসে ওয়েবসাইটের সঠিক প্রদর্শন নিশ্চিত করা।

• ওয়েব ডিজাইনের মূলনীতির পরিচিতি:

• ইউজার ইন্টারফেস (UI) ডিজাইন:

1. ইউজার ইন্টারফেস: ব্যবহারকারীর সাথে যোগাযোগের জন্য ডিজাইন করা উপাদানসমূহ, যেমন বোতাম, ফর্ম, নেভিগেশন বার।
2. ইউজার এক্সপেরিয়েন্স (UX): ইউজার ইন্টারফেসের অভ্যন্তরীণ কার্যকারিতা এবং ব্যবহারকারীর সন্তুষ্টি নিশ্চিত করা।

• ব্যবহারযোগ্যতা (Usability):

1. সুস্পষ্ট নেভিগেশন: ওয়েবসাইটের কনটেন্ট সহজে খুঁজে পাওয়ার জন্য মেনু ও লিঙ্কের সুসংগঠিত ডিজাইন।
2. প্রতিক্রিয়া সময়: ওয়েবসাইটের দ্রুত লোডিং সময় এবং রেসপন্সিভ ডিজাইন।

২. HTML (HyperText Markup Language):

• HTML পরিচিতি:

1. সংজ্ঞা: HTML একটি মার্কআপ ভাষা যা ওয়েব পেজ এবং অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়।
2. উদ্দেশ্য: ওয়েব পেজের কনটেন্ট সংজ্ঞায়িত করে এবং ব্রাউজারে প্রদর্শন নিশ্চিত করে।

1. HTML ডকুমেন্টের স্ট্রাকচার:

1. মেটা ট্যাগস:

1. <meta charset=”UTF-8″>: ডকুমেন্টের চরসেট নির্ধারণ করে।
2. <meta name=”description” content=”Description”>: ওয়েব পেজের সংক্ষিপ্ত বর্ণনা প্রদান করে, SEO এর জন্য।

• বেসিক HTML ট্যাগস:

1. <header>: ওয়েব পেজের শিরোনাম অংশ, সাধারণত নেভিগেশন লিঙ্ক অন্তর্ভুক্ত থাকে।
2. <nav>: ওয়েবসাইটের নেভিগেশন মেনু।
3. <main>: পেজের মূল কনটেন্ট।
4. <footer>: ওয়েব পেজের নীচের অংশ, সাধারণত কপিরাইট তথ্য ও লিঙ্ক থাকে।

আরো পড়ুন :

• এইচএসসি আইসিটি তথ্য ও যোগাযোগ প্রযুক্তি : বিশ্ব ও বাংলাদেশ প্রেক্ষিত
• সংখ্যা পদ্ধতি এবং ডিজিটাল ডিভাইস
• আইসিটি প্রোগ্রামিং ভাষা

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

1. <!DOCTYPE html>: HTML5 ডকুমেন্টের ধরন নির্ধারণ করে।
2. <html>: HTML ডকুমেন্টের মূল ট্যাগ।
3. <head>: মেটা তথ্য, টাইটেল এবং লিংকগুলির জন্য ব্যবহৃত।
4. <title>: ওয়েব পেজের শিরোনাম।
5. <body>: পেজের মূল কনটেন্ট, যেমন টেক্সট, ছবি, লিংক ইত্যাদি।

• HTML ট্যাগস:

1. পারাগ্রাফ এবং টেক্সট:

1. : পারাগ্রাফ ট্যাগ।

   1. <h1> – <h6>: হেডিং ট্যাগস (সবচেয়ে বড় হেডিং হল <h1> এবং সবচেয়ে ছোট <h6>)।
   1. <b>: বোল্ড টেক্সট।
   1. <i>: ইটালিক টেক্সট।

• লিংক এবং ইমেজ:

1. : হাইপারলিঙ্ক তৈরি করে।
   1. <img src=”URL” alt=”description”>: ওয়েব পেজে ছবি যোগ করে।

• তালিকা:

1. : আনঅর্ডার্ড তালিকা।
   1. <ol>: অর্ডারড তালিকা।
   1. <li>: তালিকার আইটেম।

• HTML টেবিল ডিজাইন:

1. <table>: টেবিল তৈরি করে।
2. <caption>: টেবিলের শিরোনাম।
3. <thead>: টেবিলের হেডার অংশ।
4. <tbody>: টেবিলের কনটেন্ট অংশ।
5. <tfoot>: টেবিলের ফুটার অংশ।
6. সারি (Row): <tr> ট্যাগ দ্বারা তৈরি।
7. কলাম (Column): <td> ট্যাগ দ্বারা তৈরি সেল।
8. হেডার সেল: <th> ট্যাগ দ্বারা হেডার সেল তৈরি করা।

• HTML অ্যাট্রিবিউটস:

1. attributes: ট্যাগের বৈশিষ্ট্য উল্লেখ করে। উদাহরণ: লিংক ট্যাগে `href` অ্যাট্রিবিউট।
   1. স্টাইলিং: ‘style’ অ্যাট্রিবিউটের মাধ্যমে সরাসরি ট্যাগে স্টাইল যোগ করা।

• HTML ফর্ম এবং ইনপুট কন্ট্রোল:

1. <form>: ফর্মের কন্টেইনার।
2. <input type=”text”>: টেক্সট ইনপুট।
3. <input type=”password”>: পাসওয়ার্ড ইনপুট।
4. <input type=”submit”>: সাবমিট বোতাম।
5. <textarea>: বড় টেক্সট ক্ষেত্র।
6. <select>: ড্রপডাউন লিস্ট।
7. <label>: ইনপুট ক্ষেত্রের জন্য লেবেল।

• মিডিয়া:

1. <video>: ভিডিও যোগ করার জন্য।
2. <audio>: অডিও যোগ করার জন্য

• ওয়েব ডিজাইনে CSS এর ভূমিকা:

1. টেক্সট স্টাইলিং: ‘font-family’, ‘font-size’, ‘color’ প্রোপার্টি ব্যবহার করে।
2. বক্স মডেল: margin, border, padding, width, এবং height প্রোপার্টি দিয়ে উপাদানগুলোর মাপ ও স্থান নির্ধারণ।
3. ফ্লেক্সবক্স: ‘display: flex’ প্রোপার্টি ব্যবহার করে লেআউট তৈরি করা।
4. গ্রিড লেআউট: ‘display: grid’ প্রোপার্টি ব্যবহার করে গ্রিড ভিত্তিক লেআউট ডিজাইন করা।

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