মোঃ মনিরুল হক
সহকারী শিক্ষক
২৯ আগস্ট, ২০২৫ ১১:৫৪ পূর্বাহ্ণ
HTML দিয়ে ওয়েবপেইজ ও ওয়েবসাইট ডিজাইনের প্রাথমিক ধারণা
ধরনঃ সাধারণ শিক্ষা
শ্রেণিঃ দ্বাদশ
বিষয়ঃ তথ্য ও যোগাযোগ প্রযুক্তি
অধ্যায়ঃ অধ্যায় ৪
মনিরুল হক,
ইন্টারনেটে আমরা যেসব ওয়েবসাইট দেখি, ফেসবুক, ইউটিউব, অনলাইন পত্রিকা বা স্কুলের ওয়েবসাইট, সবই মূলত একেকটি ওয়েব পেইজের সমষ্টি। এই ওয়েব পেইজগুলোকে সাজানো, ডিজাইন করা এবং ব্যবহার উপযোগী করার প্রক্রিয়াকেই বলা হয় ওয়েবসাইট ডিজাইন।
ওয়েবসাইট ডিজাইন কী?
ওয়েবসাইট ডিজাইন হলো এমন একটি প্রক্রিয়া যেখানে টেক্সট, ছবি, ভিডিও, কালার, লে-আউট, মেনু ইত্যাদি একত্রিত করে একটি আকর্ষণীয় এবং ব্যবহারযোগ্য ওয়েবপেজ তৈরি করা হয়। এর দুটি প্রধান দিক আছে:
1. ফ্রন্টএন্ড ডিজাইন – ব্যবহারকারীর সামনে যা দেখা যায় (UI বা User Interface)। যেমন টেক্সটের রঙ, ফন্ট, বাটন, ছবি, মেনু।
2. ব্যাকএন্ড ডেভেলপমেন্ট – ওয়েবসাইটের ভেতরের কাজ (ডেটা সংরক্ষণ, সার্ভার, লজিক)।
শুরুর জন্য আমাদের প্রথমে শিখতে হবে ফ্রন্টএন্ড ডিজাইন, যার ভিত্তি হলো HTML।
HTML কী?
HTML (HyperText Markup Language) হলো ওয়েবপেজ তৈরির মূল ভাষা। এটাকে "Markup Language" বলা হয় কারণ এখানে বিশেষ ট্যাগ ব্যবহার করে আমরা ব্রাউজারকে নির্দেশ দিই কিভাবে কনটেন্ট দেখাবে।
উদাহরণস্বরূপ:
<h1>আমার প্রথম ওয়েবপেজ</h1>
<p>এটি একটি অনুচ্ছেদ।</p>
এখানে <h1> হলো শিরোনামের জন্য ট্যাগ এবং <p> হলো প্যারাগ্রাফের ট্যাগ।
HTML দিয়ে একটি সাধারণ ওয়েবপেজ তৈরিঃ
১. HTML ডকুমেন্টের মৌলিক কাঠামোঃ
প্রতিটি ওয়েবপেজের একটি নির্দিষ্ট কাঠামো থাকে।
<!DOCTYPE html>
<html>
<head>
<title>আমার ওয়েবসাইট</title>
</head>
<body>
<h1>স্বাগতম!</h1>
<p>এটি আমার প্রথম ওয়েবপেজ।</p>
</body>
</html>
২. HTML এর গুরুত্বপূর্ণ ট্যাগসমূহঃ
- Heading ট্যাগ – <h1> থেকে <h6> পর্যন্ত, যেখানে <h1> সবচেয়ে বড় শিরোনাম।
- Paragraph ট্যাগ – <p> টেক্সট লেখার জন্য।
- Link ট্যাগ – <a href="url">লিংক</a> দিয়ে অন্য ওয়েবপেজে যাওয়া যায়।
- Image ট্যাগ – <img src="image.jpg" alt="ছবির নাম"> ছবি দেখানোর জন্য।
- List ট্যাগ
- <ul> = Unordered List (● বুলেট লিস্ট)
- <ol> = Ordered List (১,২,৩ ক্রম)
- <li> = List Item
৩. উদাহরণ: একটি পূর্ণ ওয়েবপেজঃ
<!DOCTYPE html>
<html>
<head>
<title>আমার স্কুল ওয়েবসাইট</title>
</head>
<body>
<h1>ডাঁশা মাধ্যমিক বিদ্যালয়</h1>
<p>আমাদের স্কুলের ওয়েবসাইটে আপনাকে স্বাগতম।</p>
<h2>আমাদের সম্পর্কে</h2>
<p>আমাদের স্কুল কুষ্টিয়া জেলার একটি ঐতিহ্যবাহী শিক্ষাপ্রতিষ্ঠান।</p>
<h2>ছবি</h2>
<img src="school.jpg" alt="আমাদের স্কুল" width="400">
<h2>গুরুত্বপূর্ণ লিংক</h2>
<ul>
<li><a href="https://www.dhakaeducationboard.gov.bd">শিক্ষা বোর্ড</a></li>
<li><a href="https://www.nctb.gov.bd">এনসিটিবি</a></li>
</ul>
</body>
</html>
HTML দিয়ে ওয়েবসাইট বানাতে যা দরকারঃ
1. টেক্সট এডিটর – যেমন Notepad, Sublime Text, VS Code।
2. ওয়েব ব্রাউজার – যেমন Chrome, Firefox, Edge।
3. একটি .html এক্সটেনশনের ফাইল, যেটা ব্রাউজারে খুললেই ওয়েবপেজ দেখা যাবে।
ওয়েবসাইট ডিজাইন শুরু করার প্রথম ধাপ হলো HTML শেখা। এটি ওয়েব ডেভেলপমেন্টের বুনিয়াদ। HTML আয়ত্ত করার পর ধাপে ধাপে CSS (স্টাইলিং) এবং JavaScript (ইন্টারঅ্যাকটিভিটি) শিখতে হবে। তখন একটি সাধারণ ওয়েবপেজ থেকে শুরু করে পূর্ণাঙ্গ ওয়েবসাইট তৈরি করা সম্ভব হবে।
মোঃ মনিরুল হক
সহকারী শিক্ষক
আমলাবাড়ী মাধ্যমিক বিদ্যালয়
খোকসা, কুষ্টিয়া
০১৭২২২৭৩২৭২
মন্তব্য করুন
