অধ্যায় ৩: HTML Tags – Heading, Paragraph, Links, Images, Lists (বাংলায়)
এই অধ্যায়ে আপনি শিখবেন HTML-এর কিছু সবচেয়ে গুরুত্বপূর্ণ ট্যাগ ব্যবহার করতে — যেগুলো প্রতিটি ওয়েবপেজেই থাকে।
১. Heading Tags (<h1> থেকে <h6>)
HTML-এ ৬টি হেডিং ট্যাগ আছে:
<h1>এটা সবচেয়ে বড় হেডিং</h1>
<h2>এটা একটু ছোট</h2>
<h3>এটা আরও ছোট</h3>
<h4>এটা ছোট থেকে ছোট</h4>
<h5>এটা খুব ছোট</h5>
<h6>সবচেয়ে ছোট হেডিং</h6>
ব্যবহার: টাইটেল, সেকশন হেডিং ইত্যাদিতে।
২. Paragraph Tag (<p>)
<p>আমি ওয়েব ডেভেলপমেন্ট শিখছি। এটা একটা প্যারাগ্রাফ।</p>
ব্যবহার: সাধারণ লেখার জন্য।
৩. Link Tag (<a>)
<a href="https://www.google.com">গুগলে যান</a>
-
hrefঅ্যাট্রিবিউট দিয়ে লিংকের গন্তব্য ঠিক করা হয়। -
লিংকে ক্লিক করলে ব্রাউজার ওই ঠিকানায় চলে যাবে।
নতুন ট্যাবে খুলতে চাইলে:
<a href="https://www.google.com" target="_blank">গুগলে নতুন ট্যাবে যান</a>
৪. Image Tag (<img>)
<img src="photo.jpg" alt="একটি ছবি">
| অংশ | কাজ |
|---|---|
src |
ছবির ঠিকানা (লোকাল বা URL) |
alt |
ছবি না লোড হলে যা দেখাবে |
উদাহরণ (অনলাইনের ছবি):
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
৫. List Tags (List বানানো)
Unordered List (বুলেট পয়েন্ট)
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered List (সংখ্যা দিয়ে)
<ol>
<li>Login Page</li>
<li>Dashboard</li>
<li>Logout</li>
</ol>
একটি পূর্ণ উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>আমার ওয়েবপেজ</title>
</head>
<body>
<h1>স্বাগতম!</h1>
<p>এটা আমার প্রথম ওয়েবপেজ।</p>
<h2>আমার প্রিয় বিষয়</h2>
<ul>
<li>ওয়েব ডিজাইন</li>
<li>প্রোগ্রামিং</li>
<li>গ্রাফিক্স</li>
</ul>
<h2>গুরুত্বপূর্ণ লিংক</h2>
<a href="https://www.youtube.com" target="_blank">ইউটিউবে যান</a>
<h2>আমার ছবি</h2>
<img src="https://via.placeholder.com/200" alt="আমার ছবি">
</body>
</html>
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
হেডিং, প্যারাগ্রাফ, লিংক, ছবি এবং লিস্ট ব্যবহার
-
কীভাবে পেজে গঠন তৈরি করবেন
পরবর্তী অধ্যায়:
অধ্যায় ৪: HTML Form ও Input Elements