HTML (Hypertext Markup Language) হল একটি মার্কআপ language, যা ওয়েবপেজ তৈরি করার জন্য ব্যবহৃত হয়। এটি ওয়েবের structure গঠন করে। আজকের এই পোস্টটিতে আমরা HTML Basic Syntax সম্পর্কে জানবো।
Table of Contents
HTML কী ?
HTML (Hypertext Markup Language) হল একটি মার্কআপ language , যা ওয়েবপেজ তৈরি করার জন্য ব্যবহৃত হয়। এটি ওয়েবের structure গঠন করে এবং বিভিন্ন ধরনের কনটেন্ট যেমন টেক্সট, ইমেজ, লিঙ্ক ইত্যাদি প্রদর্শনের জন্য ব্যবহৃত হয়। HTML কোডগুলি ট্যাগ দিয়ে লেখা হয়, যা ব্রাউজারকে নির্দেশ দেয় কিভাবে একটি ওয়েবপেজ ব্রাউজারে প্রদর্শিত হবে।
HTML ডকুমেন্টের Basic Structure
একটি HTML ডকুমেন্টের গঠন নির্দিষ্ট কিছু ট্যাগ নিয়ে তৈরী হয়। চলুন দেখে নেওয়া যাক HTML ডকুমেন্টের Basic Structure কেমন হওয়া উচিত:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to TechInBengali</h1>
<p>This is a paragraph.</p>
</body>
</html>DOCTYPE
একটি HTML ডকুমেন্টের প্রথম লাইনটি হল , যা ব্রাউজারকে জানায় যে এটি একটি HTML5 ডকুমেন্ট। এটি একটি — , এটি কোনও ট্যাগ নয়, যা ডকুমেন্টের টাইপ নির্দেশ করে।
<!DOCTYPE html>HTML ট্যাগ
ট্যাগটি হলো একটি HTML ডকুমেন্টের মূল রুট এলিমেন্ট। এটি হল সেই এলিমেন্ট যার মধ্যে ডকুমেন্টের সমস্ত কনটেন্ট লেখা থাকে। ট্যাগটি খোলার সাথে সাথে ডকুমেন্টের শেষ পর্যন্ত সমস্ত কনটেন্ট লেখা হয় এবং শেষে এটিকে দিয়ে বন্ধ করা হয়।
নিচের — টা লক্ষ করুন।
<html>
</html>HEAD ট্যাগ
ট্যাগের মধ্যে ডকুমেন্টের সমস্ত মেটাডেটা থাকে। এর মধ্যে ওয়েবপেজের টাইটেল, CSS ফাইলের লিংক, জাভাস্ক্রিপ্ট কোড ইত্যাদি লেখা হয়। উদাহরণস্বরূপ:
<head>
<title> Techinbengali </title>
<link rel="stylesheet" href="styles.css">
<script src="myscripts.js"></script>
</head>TITLE ট্যাগ
ট্যাগটি ডকুমেন্টের টাইটেল নির্ধারণ করে। এই টাইটেলটি ব্রাউজারের ট্যাব বারে দেখা যায় এবং এটি SEO-র জন্যও অত্যন্ত গুরুত্বপূর্ণ।
<title> Techinbengali </title>BODY ট্যাগ
<body> ট্যাগটির মধ্যে ডকুমেন্টের মূল কনটেন্ট লেখা থাকে। এর মধ্যে আমরা ওয়েবপেজের সমস্ত element যেমন টেক্সট, ইমেজ, লিঙ্ক ইত্যাদি লিখি। উদাহরণস্বরূপ:
<body>
<h1>Welcome to TechInBengali</h1>
<p>This is a paragraph.</p>
</body>
Basic HTML ট্যাগসমূহের ব্যবহার
Paragraph ট্যাগ ( <p> )
<p> ট্যাগটি একটি প্যারাগ্রাফ তৈরি করতে ব্যবহৃত হয়। HTML ডকুমেন্টে সাধারণত টেক্সট বা প্যারাগ্রাফ লিখতে এই ট্যাগটি ব্যবহার করা হয়।
<p>This is a paragraph.</p>Heading ট্যাগ ( <h1> – <h6> )
<h1> থেকে <h6> পর্যন্ত ট্যাগগুলি হেডিং তৈরি করতে ব্যবহৃত হয়। <h1> হলো সবচেয়ে বড় হেডিং এবং <h6> হলো সবচেয়ে ছোট হেডিং নির্দেশ করে।
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>Anchor ট্যাগ ( <a> )
<a> ট্যাগটি একটি লিংক তৈরি করতে ব্যবহৃত হয়। এর মধ্যে href অ্যাট্রিবিউট ব্যবহার করে লিংকের ঠিকানা নির্ধারণ করা হয়। উদাহরণস্বরূপ:
<a>href="https://techinbengali.com/"> Visit Our Website </a>Visit Our Website Image ট্যাগ ( <img> )
<img> ট্যাগটি একটি ইমেজ যোগ করতে ব্যবহৃত হয়। এর মধ্যে src অ্যাট্রিবিউট ব্যবহার করে ইমেজের সোর্স ফাইল নির্ধারণ করা হয়। উদাহরণস্বরূপ:
<img src="image.jpg" alt="Description" >List ট্যাগসমূহ ( <li> , <ul> , <ol> )
তালিকা তৈরির জন্য <ul> (unordered list), <ol> (ordered list) এবং <li> (list item) ট্যাগগুলি ব্যবহার করা হয়।
<ul>
<li>Water</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Water</li>
<li>Tea</li>
<li>Milk</li>
</ol>HTML Playlist : HTML5 Tutorial in Bengali
উপসংহার
HTML হল ওয়েব ডেভেলপমেন্টের মূল Structure। HTML এর বেসিক সিনট্যাক্স শিখে নেওয়া প্রতিটি ওয়েব ডেভেলপারের জন্য গুরুত্বপূর্ণ । এই ব্লগে আমরা HTML ডকুমেন্টের Basic Structure এবং ট্যাগসমূহের ভূমিকা সম্পর্কে আলোচনা করেছি। আশা করি, এই তথ্যগুলি আপনাকে HTML শিখতে এবং আপনার ওয়েব ডেভেলপমেন্ট স্কিল উন্নত করতে সাহায্য করবে ।
F.A.Q
HTML কী ?
HTML (HyperText Markup Language) হল একটি মার্কআপ language যা ওয়েবপেজ তৈরি করতে ব্যবহৃত হয়।
DOCTYPE ট্যাগের ব্যবহার কী ?
< ! DOCTYPE html > ট্যাগটি HTML ডকুমেন্টের শুরুতে ব্যবহৃত হয় এবং এটি ব্রাউজারকে জানায় যে ডকুমেন্টটি HTML5 ব্যবহার করে লেখা হয়েছে।
HTML ট্যাগের কাজ কী ?
<html> ট্যাগটি HTML ডকুমেন্টের রুট এলিমেন্ট। এর মধ্যে সমস্ত HTML কোড লেখা হয় এবং ডকুমেন্টের অন্যান্য ট্যাগগুলি এই ট্যাগের মধ্যে থাকে।
HEAD ট্যাগ কী কাজ করে ?
<head> ট্যাগটির মধ্যে HTML ডকুমেন্টের মেটাডেটা থাকে। এর মধ্যে টাইটেল, CSS লিংক, জাভাস্ক্রিপ্ট, এবং অন্যান্য তথ্য লেখা হয় যা ওয়েবপেজের জন্য অত্যন্ত গুরুত্বপূর্ণ।
TITLE ট্যাগের গুরুত্ব কী ?
< title > ট্যাগটি ওয়েবপেজের টাইটেল নির্ধারণ করে, যা ব্রাউজারের ট্যাব বারে প্রদর্শিত হয় এবং এটি SEO-র জন্যও গুরুত্বপূর্ণ।
BODY ট্যাগের ভূমিকা কী ?
<body> ট্যাগটির মধ্যে ডকুমেন্টের মূল কনটেন্ট লেখা থাকে। এর মধ্যে টেক্সট, ইমেজ, লিঙ্ক, এবং অন্যান্য element লেখা হয় যা ব্রাউজারে প্রদর্শিত হয়।
