Awesome! টিউনস
সকল Awesome! টিউনস

70 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডেভেলপমেন্ট
প্রকাশিত
Level 0

1 টিউনস 0 টিউমেন্টস 0 ফলোয়ার

Html শেখার বেসিক ধারণা [নতুন দের জন্য]

HTML: একেবারে বেসিক থেকে শুরু

 

HTML কী?

 

HTML (HyperText Markup Language) হলো ওয়েব পেজ তৈরির জন্য ব্যবহৃত একটি মার্কআপ ভাষা। এটি ব্রাউজারকে বলে দেয় যে কনটেন্ট কীভাবে প্রদর্শন করতে হবে। HTML নিজে কোনো প্রোগ্রামিং ভাষা নয়, বরং এটি একটি গঠনমূলক ভাষা যা ওয়েবসাইটের কাঠামো তৈরি করতে ব্যবহৃত হয়।

 

 

-

 

HTML এর মৌলিক গঠন

 

একটি সাধারণ HTML ডকুমেন্ট নিচের মতো দেখায়:

 

<!DOCTYPE html>

<html lang="bn">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>আমার প্রথম ওয়েব পেজ</title>

</head>

<body>

<h1>স্বাগতম!</h1>

<p>এটি আমার প্রথম ওয়েব পেজ। </p>

</body>

</html>

 

কোড বিশ্লেষণ:

 

1. <!DOCTYPE html> → এটি ব্রাউজারকে বলে যে আমরা HTML5 ব্যবহার করছি।

 

 

2. <html> → এটি পুরো HTML ডকুমেন্টকে ঘিরে রাখে।

 

 

3. <head> → এখানে পেজের মেটা তথ্য, স্টাইলশিট এবং স্ক্রিপ্ট যুক্ত করা হয়।

 

 

4. <title> → এটি ব্রাউজারের ট্যাবে প্রদর্শিত শিরোনাম।

 

 

5. <body> → এখানে মূল কনটেন্ট (টেক্সট, ইমেজ, লিংক ইত্যাদি) থাকে।

 

 

6. <h1> → এটি সবচেয়ে বড় হেডিং।

 

 

7. <p> → এটি একটি অনুচ্ছেদ (Paragraph) তৈরি করে।

 

 

 

 

-

 

HTML এর গুরুত্বপূর্ণ ট্যাগসমূহ

 

১. হেডিং ট্যাগ (Heading Tags)

 

HTML-এ ছয়টি হেডিং ট্যাগ আছে:

 

<h1>সবচেয়ে বড় হেডিং</h1>

<h2>এর চেয়ে ছোট</h2>

<h3>আরও ছোট</h3>

<h4>এখনও ছোট</h4>

<h5>খুব ছোট</h5>

<h6>সবচেয়ে ছোট</h6>

 

২. অনুচ্ছেদ এবং লাইন ব্রেক (Paragraph & Line Break)

 

<p>এটি একটি অনুচ্ছেদ। </p>

<p>আরেকটি অনুচ্ছেদ। </p>

 

লাইনের মধ্যে ব্রেক দিতে চাইলে <br> ট্যাগ ব্যবহার করা হয়:

 

<p>এই বাক্যটি <br>দুই লাইনে ভাঙা হবে। </p>

 

৩. লিংক (Hyperlink)

 

একটি ওয়েবসাইটের লিংক যুক্ত করতে <a> ট্যাগ ব্যবহার করা হয়:

 

<a href="https://www.example.com">এখানে ক্লিক করুন</a>

 

৪. ইমেজ (Image)

 

ওয়েবসাইটে ছবি দেখানোর জন্য <img> ট্যাগ ব্যবহার করা হয়:

 

<img src="image.jpg" alt="ছবির বিবরণ" width="300">

 

৫. তালিকা (Lists)

 

১. অর্ডার্ড লিস্ট (Ordered List - সংখ্যা বা অক্ষরে সাজানো)

 

<ol>

<li>প্রথম আইটেম</li>

<li>দ্বিতীয় আইটেম</li>

<li>তৃতীয় আইটেম</li>

</ol>

 

২. আনঅর্ডার্ড লিস্ট (Unordered List - বিন্দু বা চিহ্নে সাজানো)

 

<ul>

<li>প্রথম আইটেম</li>

<li>দ্বিতীয় আইটেম</li>

<li>তৃতীয় আইটেম</li>

</ul>

 

৬. টেবিল (Table)

 

HTML-এ টেবিল তৈরি করতে <table> ট্যাগ ব্যবহার করা হয়:

 

<table border="1">

<tr>

<th>নাম</th>

<th>বয়স</th>

</tr>

<tr>

<td>রহিম</td>

<td>২৫</td>

</tr>

<tr>

<td>করিম</td>

<td>৩০</td>

</tr>

</table>

 

৭. ফর্ম (Form) - ইউজারের ইনপুট নেওয়ার জন্য

 

<form action="submit.php" method="post">

<label for="name">নাম:</label>

<input type="text" id="name" name="name"><br><br>

 

<label for="email">ইমেইল:</label>

<input type="email" id="email" name="email"><br><br>

 

<input type="submit" value="জমা দিন">

</form>

 

 

-

 

CSS ও JavaScript যুক্ত করা (একটু বাড়তি জ্ঞান)

 

HTML-এ স্টাইল যোগ করতে আমরা CSS ব্যবহার করি। CSS যোগ করার জন্য <style> ট্যাগ ব্যবহার করা যায়:

 

<style>

body {background-color: lightblue;}

h1 {color: red;}

</style>

 

এছাড়া, HTML-এর মধ্যে JavaScript স্ক্রিপ্ট যোগ করাও সম্ভব:

 

<script>

alert("স্বাগতম!");

</script>

 

 

-

 

উপসংহার

 

এই ব্লগে আমরা HTML-এর একেবারে বেসিক ধারণা দিয়েছি। HTML ওয়েব ডেভেলপমেন্টের প্রথম ধাপ। আপনি যদি এটি ভালোভাবে শিখে নেন, তাহলে CSS ও JavaScript শিখে আরও চমৎকার ওয়েবসাইট তৈরি করতে পারবেন। Happy Coding!

 

 

Level 0

আমি ফয়সাল আহমেদ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 1 সপ্তাহ 4 দিন যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 1 টি টিউন ও 0 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস