Skill

এইচটিএমএল রেফারেন্স(HTML Reference)

Web Development- এইচটিএমএল (HTML) - এইচটিএমএল রেফারেন্স(HTML Reference)
334

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

এখানে কিছু সাধারণ HTML রেফারেন্স প্রদান করা হলো, যা HTML কোড লেখার সময় সহায়ক হতে পারে।


1. HTML ডকুমেন্ট স্ট্রাকচার

HTML ডকুমেন্টের মৌলিক কাঠামো:

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <h1>হেডলাইন</h1>
  <p>এই হল একটি প্যারাগ্রাফ।</p>
</body>
</html>
  • <!DOCTYPE html>: HTML5 ডকুমেন্ট টাইপ ঘোষণা।
  • <html>: HTML ডকুমেন্টের মূল উপাদান।
  • <head>: মেটা তথ্য এবং অন্যান্য গুরুত্বপূর্ণ ট্যাগ।
  • <body>: ওয়েব পেজের দৃশ্যমান কনটেন্ট।

2. বেসিক HTML ট্যাগস (Basic HTML Tags)

হেডিং ট্যাগস

<h1>এই একটি বড় শিরোনাম</h1>
<h2>এটি একটি ছোট শিরোনাম</h2>
  • <h1> to <h6>: শিরোনাম ট্যাগ, যেখানে <h1> সবচেয়ে বড় এবং <h6> সবচেয়ে ছোট।

প্যারাগ্রাফ

<p>এটি একটি প্যারাগ্রাফ।</p>
  • <p>: প্যারাগ্রাফ ট্যাগ, টেক্সট ব্লক তৈরি করতে ব্যবহৃত হয়।

3. লিঙ্ক (Links)

<a href="https://www.example.com">এখানে ক্লিক করুন</a>
  • <a>: হাইপারলিঙ্ক তৈরি করতে ব্যবহৃত হয়। href এট্রিবিউট দ্বারা লিঙ্কের ঠিকানা নির্ধারণ করা হয়।

4. ইমেজ (Images)

<img src="image.jpg" alt="ছবির বর্ণনা" width="300" height="200">
  • <img>: ইমেজ প্রদর্শন করতে ব্যবহৃত হয়। src (source) এট্রিবিউট দ্বারা ছবির লোকেশন নির্ধারণ করা হয়, এবং alt এট্রিবিউট ছবির বর্ণনা প্রদান করে।

5. তালিকা (Lists)

অর্ডারড তালিকা (Ordered List):

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

আনঅর্ডারড তালিকা (Unordered List):

<ul>
  <li>প্রথম আইটেম</li>
  <li>দ্বিতীয় আইটেম</li>
</ul>
  • <ol>: অর্ডারড তালিকা (নম্বরযুক্ত তালিকা)।
  • <ul>: আনঅর্ডারড তালিকা (বুলেট পয়েন্ট তালিকা)।
  • <li>: তালিকার আইটেম।

6. টেবিল (Table)

<table border="1">
  <tr>
    <th>নাম</th>
    <th>বয়স</th>
  </tr>
  <tr>
    <td>জন</td>
    <td>২৫</td>
  </tr>
  <tr>
    <td>মাইক</td>
    <td>৩০</td>
  </tr>
</table>
  • <table>: টেবিল তৈরি করার জন্য ব্যবহৃত হয়।
  • <tr>: টেবিল রো (লাইন) তৈরি করতে ব্যবহৃত হয়।
  • <th>: টেবিল হেডার সেল।
  • <td>: টেবিল ডেটা সেল।

7. ফর্ম (Form)

<form action="/submit" method="POST">
  <label for="name">নাম:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">ইমেইল:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">জমা দিন</button>
</form>
  • <form>: ফর্ম তৈরি করতে ব্যবহৃত হয়।
  • <label>: ইনপুট ক্ষেত্রের জন্য ট্যাগ।
  • <input>: ইনপুট ক্ষেত্র তৈরি করতে ব্যবহৃত হয়।
  • <button>: ফর্ম সাবমিট করার জন্য বাটন।

8. আইফ্রেম (Iframe)

<iframe src="https://www.example.com" width="600" height="400"></iframe>
  • <iframe>: অন্য একটি পেজ ওয়েব পেজের মধ্যে এম্বেড করতে ব্যবহৃত হয়।

9. স্টাইলিং (CSS in HTML)

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Styled Page</title>
  <style>
    body {
      background-color: lightblue;
      font-family: Arial, sans-serif;
    }
    
    h1 {
      color: green;
    }
    
    p {
      color: black;
    }
  </style>
</head>
<body>
  <h1>স্বাগতম!</h1>
  <p>এই পেজটি সিএসএস দ্বারা স্টাইল করা হয়েছে।</p>
</body>
</html>
  • <style>: HTML ডকুমেন্টের ভিতরে CSS কোড অন্তর্ভুক্ত করতে ব্যবহৃত হয়।

10. মেটা ট্যাগ (Meta Tags)

<head>
  <meta charset="UTF-8">
  <meta name="description" content="এটি একটি HTML উদাহরণ">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  • <meta>: ওয়েব পেজের মেটা তথ্য (যেমন চরিত্র সেট, ডিজাইন প্রোপার্টি) প্রদান করে।

সারাংশ

HTML (HyperText Markup Language) হল ওয়েব পেজের গঠন তৈরি করতে ব্যবহৃত একটি ভাষা। HTML এর মাধ্যমে আপনি ওয়েব পেজে টেক্সট, ছবি, লিঙ্ক, ফর্ম, টেবিল, তালিকা, এবং আরও অনেক কিছু তৈরি করতে পারেন। এই রেফারেন্সটি HTML এর বিভিন্ন ট্যাগ এবং বৈশিষ্ট্য সম্পর্কে তথ্য প্রদান করেছে, যা ওয়েব ডেভেলপমেন্টে অত্যন্ত গুরুত্বপূর্ণ। HTML জানলে আপনি ওয়েব পেজ ডিজাইন এবং ডেভেলপ করতে পারবেন।

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

এখানে কিছু সাধারণ HTML রেফারেন্স প্রদান করা হলো, যা HTML কোড লেখার সময় সহায়ক হতে পারে।


1. HTML ডকুমেন্ট স্ট্রাকচার

HTML ডকুমেন্টের মৌলিক কাঠামো:

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <h1>হেডলাইন</h1>
  <p>এই হল একটি প্যারাগ্রাফ।</p>
</body>
</html>
  • <!DOCTYPE html>: HTML5 ডকুমেন্ট টাইপ ঘোষণা।
  • <html>: HTML ডকুমেন্টের মূল উপাদান।
  • <head>: মেটা তথ্য এবং অন্যান্য গুরুত্বপূর্ণ ট্যাগ।
  • <body>: ওয়েব পেজের দৃশ্যমান কনটেন্ট।

2. বেসিক HTML ট্যাগস (Basic HTML Tags)

হেডিং ট্যাগস

<h1>এই একটি বড় শিরোনাম</h1>
<h2>এটি একটি ছোট শিরোনাম</h2>
  • <h1> to <h6>: শিরোনাম ট্যাগ, যেখানে <h1> সবচেয়ে বড় এবং <h6> সবচেয়ে ছোট।

প্যারাগ্রাফ

<p>এটি একটি প্যারাগ্রাফ।</p>
  • <p>: প্যারাগ্রাফ ট্যাগ, টেক্সট ব্লক তৈরি করতে ব্যবহৃত হয়।

3. লিঙ্ক (Links)

<a href="https://www.example.com">এখানে ক্লিক করুন</a>
  • <a>: হাইপারলিঙ্ক তৈরি করতে ব্যবহৃত হয়। href এট্রিবিউট দ্বারা লিঙ্কের ঠিকানা নির্ধারণ করা হয়।

4. ইমেজ (Images)

<img src="image.jpg" alt="ছবির বর্ণনা" width="300" height="200">
  • <img>: ইমেজ প্রদর্শন করতে ব্যবহৃত হয়। src (source) এট্রিবিউট দ্বারা ছবির লোকেশন নির্ধারণ করা হয়, এবং alt এট্রিবিউট ছবির বর্ণনা প্রদান করে।

5. তালিকা (Lists)

অর্ডারড তালিকা (Ordered List):

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

আনঅর্ডারড তালিকা (Unordered List):

<ul>
  <li>প্রথম আইটেম</li>
  <li>দ্বিতীয় আইটেম</li>
</ul>
  • <ol>: অর্ডারড তালিকা (নম্বরযুক্ত তালিকা)।
  • <ul>: আনঅর্ডারড তালিকা (বুলেট পয়েন্ট তালিকা)।
  • <li>: তালিকার আইটেম।

6. টেবিল (Table)

<table border="1">
  <tr>
    <th>নাম</th>
    <th>বয়স</th>
  </tr>
  <tr>
    <td>জন</td>
    <td>২৫</td>
  </tr>
  <tr>
    <td>মাইক</td>
    <td>৩০</td>
  </tr>
</table>
  • <table>: টেবিল তৈরি করার জন্য ব্যবহৃত হয়।
  • <tr>: টেবিল রো (লাইন) তৈরি করতে ব্যবহৃত হয়।
  • <th>: টেবিল হেডার সেল।
  • <td>: টেবিল ডেটা সেল।

7. ফর্ম (Form)

<form action="/submit" method="POST">
  <label for="name">নাম:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">ইমেইল:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">জমা দিন</button>
</form>
  • <form>: ফর্ম তৈরি করতে ব্যবহৃত হয়।
  • <label>: ইনপুট ক্ষেত্রের জন্য ট্যাগ।
  • <input>: ইনপুট ক্ষেত্র তৈরি করতে ব্যবহৃত হয়।
  • <button>: ফর্ম সাবমিট করার জন্য বাটন।

8. আইফ্রেম (Iframe)

<iframe src="https://www.example.com" width="600" height="400"></iframe>
  • <iframe>: অন্য একটি পেজ ওয়েব পেজের মধ্যে এম্বেড করতে ব্যবহৃত হয়।

9. স্টাইলিং (CSS in HTML)

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Styled Page</title>
  <style>
    body {
      background-color: lightblue;
      font-family: Arial, sans-serif;
    }
    
    h1 {
      color: green;
    }
    
    p {
      color: black;
    }
  </style>
</head>
<body>
  <h1>স্বাগতম!</h1>
  <p>এই পেজটি সিএসএস দ্বারা স্টাইল করা হয়েছে।</p>
</body>
</html>
  • <style>: HTML ডকুমেন্টের ভিতরে CSS কোড অন্তর্ভুক্ত করতে ব্যবহৃত হয়।

10. মেটা ট্যাগ (Meta Tags)

<head>
  <meta charset="UTF-8">
  <meta name="description" content="এটি একটি HTML উদাহরণ">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  • <meta>: ওয়েব পেজের মেটা তথ্য (যেমন চরিত্র সেট, ডিজাইন প্রোপার্টি) প্রদান করে।

সারাংশ

HTML (HyperText Markup Language) হল ওয়েব পেজের গঠন তৈরি করতে ব্যবহৃত একটি ভাষা। HTML এর মাধ্যমে আপনি ওয়েব পেজে টেক্সট, ছবি, লিঙ্ক, ফর্ম, টেবিল, তালিকা, এবং আরও অনেক কিছু তৈরি করতে পারেন। এই রেফারেন্সটি HTML এর বিভিন্ন ট্যাগ এবং বৈশিষ্ট্য সম্পর্কে তথ্য প্রদান করেছে, যা ওয়েব ডেভেলপমেন্টে অত্যন্ত গুরুত্বপূর্ণ। HTML জানলে আপনি ওয়েব পেজ ডিজাইন এবং ডেভেলপ করতে পারবেন।

Promotion
NEW SATT AI এখন আপনাকে সাহায্য করতে পারে।

Are you sure to start over?

Loading...