এইচটিএমএল এর মৌলিক ধারণা ( HTML Basic )

admin Sep 15, 2020 1133 0

এইচটিএমএল এর মৌলিক ধারণা ( HTML Basic )

প্রতিটি এইচটিএমএল ডকুমেন্ট <!DOCTYPE html> ডিক্লেয়ারেশনের মাধ্যমে শুরু হয়।

এইচটিএমএল ডকুমেন্ট <html> ট্যাগ দিয়ে শুরু হয় এবং </html> ক্লোজিং ট্যাগ দিয়ে শেষ হয়।

শুধুমাত্র <body> এবং </body> ট্যাগের মাঝখানের অংশ ব্রাউজারে দেখা যায়।

<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ডকুমেন্ট</title>
</head>
<body>
<h2>onlylearn24 একাডেমি</h2>
<p>বাংলায় প্রোগ্রামিং শেখার একটি সমৃদ্ধ ওয়েব সাইট।</p>
<p>স্যাট সম্পূর্ণ বিণামূল্যে শিক্ষা সরবরাহ করে।</p>
</body>
</html>

ফলাফল

onlylearn24 একাডেমি

বাংলায় প্রোগ্রামিং শেখার একটি সমৃদ্ধ ওয়েব সাইট।

স্যাট সম্পূর্ণ বিণামূল্যে শিক্ষা সরবরাহ করে।

এইচটিএমএল হেডিং

এইচটিএমএলে <h1> থেকে <h6> দিয়ে এইচটিএমএল হেডিং বা শিরোনামকে নির্দেশ করা হয়।

<h1> দিয়ে সবচেয়ে গুরুত্বপূর্ণ এবং এভাবে পর্যায়ক্রমে <h6> দিয়ে সবচেয়ে কম গুরুত্বপূর্ণ হেডিংকে বুঝায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল হেডিং</title>
</head>
<body>
<h1>h1 সবচেয়ে গুরুত্বপূর্ণ হেডিং</h1>
<h2>h2, h1 এর চেয়ে কম গুরুত্বপূর্ণ হেডিং</h2>
<h3>h3, h2 এর চেয়ে কম গুরুত্বপূর্ণ হেডিং</h3>
<h4>h4, h3 এর চেয়ে কম গুরুত্বপূর্ণ হেডিং</h4>
<h5>h5, h4 এর চেয়ে কম গুরুত্বপূর্ণ হেডিং</h5>
<h6>h6 সবচেয়ে কম গুরুত্বপূর্ণ হেডিং</h6>
</body>
</html>

ফলাফল

h1 সবচেয়ে গুরুত্বপূর্ণ হেডিং

h2, h1 এর চেয়ে কম গুরুত্বপূর্ণ হেডিং

h3, h2 এর চেয়ে কম গুরুত্বপূর্ণ হেডিং

h4, h3 এর চেয়ে কম গুরুত্বপূর্ণ হেডিং

h5, h4 এর চেয়ে কম গুরুত্বপূর্ণ হেডিং

h6 সবচেয়ে কম গুরুত্বপূর্ণ হেডিং

বিঃদ্রঃ লেখা বড় বা মোটা করার জন্য কখনোই এইচটিএমএল হেডিং ট্যাগ ব্যবহার করা উচিৎ নয়। কারণ কনটেন্ট এর গুরুত্ব বুঝাতে হেডিং ট্যাগ ব্যবহার করা হয়। একটি পেজের জন্য শুধুমাত্র একটি হেডিং ব্যবহার করতে হয়।

এইচটিএমএল প্যারাগ্রাফ

<p> ট্যাগ দ্বারা এইচটিএমএল প্যারাগ্রাফকে বুঝানো হয়।

একটি এইচটিএমএল প্যারাগ্রাফ এলিমেন্ট ওপেনিং <p> ট্যাগ দিয়ে শুরু হয় এবং ক্লোজিং </p> ট্যাগ দিয়ে শেষ হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল প্যারাগ্রাফ</title>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ</p>
<p>এটি অন্য একটি প্যারাগ্রাফ</p>
</body>
</html>

ফলাফল

এটি একটি প্যারাগ্রাফ

এটি অন্য একটি প্যারাগ্রাফ

এইচটিএমএল লিংক

<a> ট্যাগ দিয়ে এইচটিএমএলে লিংক তৈরি করা হয় এবং href এট্রিবিউটের মাধ্যমে এই লিংকের গন্তব্যস্থান নির্ধারণ করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল লিংক</title>
</head>
<body>
<a href="www.onlylearn24.com">এটি একটি লিংক</a>
</body>
</html>

ফলাফল

এটি একটি লিংক

এইচটিএমএল ইমেজ

এইচটিএমএল <img> ট্যাগ দিয়ে ব্রাউজারে ইমেজ বা ছবি দেখানো হয়।

<img> ট্যাগের এট্রিবিউট হিসেবে src, alt, height এবংwidth ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ইমেজ</title>
</head>
<body>
<img src="satt.png" alt="onlylearn24.com" width="142" height="142">
</body>
</html>

ফলাফল

ব্রাউজারে কিভাবে এইচটিএমএলের সোর্স কোড দেখবেন?

পেজের সোর্স কোড খুজে বের করতে পেজের উপর মাউস কার্সর নিয়ে রাইট ক্লিক করে "View Page Source" সিলেক্ট করুন(Chrome ব্রাউজারে) অথবা "View Source" (IE ব্রাউজারে) অথবা অন্য ব্রাউজারের ক্ষেত্রে একই নিয়ম অনুসরণ করুন। এর মাধ্যমে এইচটিএমএল কোড সম্বলিত পেজটি ব্রাউজারের নতুন উইন্ডোতে ওপেন হবে।