মার্কডাউনে HTML এম্বেড করা

মার্কডাউনের শক্তিশালী বৈশিষ্ট্যগুলির মধ্যে একটি হল সরাসরি HTML কোড এম্বেড করার ক্ষমতা, যা আপনার ডকুমেন্টের জন্য সমৃদ্ধ এক্সপ্রেশন এবং ফাংশনাল এক্সটেনশন প্রদান করে।

মার্কডাউন বেসিক HTML এম্বেডিং

মার্কডাউন ইনলাইন HTML এলিমেন্ট

আপনি মার্কডাউনে সরাসরি HTML ট্যাগ ব্যবহার করতে পারেন:

markdown

এটি একটি প্যারাগ্রাফ যার মধ্যে <strong>বোল্ড টেক্সট</strong> এবং <em>ইটালিক টেক্সট</em> রয়েছে।

আপনি <code>ইনলাইন কোড</code> অথবা <mark>হাইলাইট করা টেক্সট</mark> ব্যবহার করতে পারেন।

এখানে একটি <a href="https://www.markdownlang.com" target="_blank">বাহ্যিক লিঙ্ক</a> রয়েছে।

রেন্ডার্ড আউটপুট:

এটি একটি প্যারাগ্রাফ যার মধ্যে বোল্ড টেক্সট এবং ইটালিক টেক্সট রয়েছে।

আপনি ইনলাইন কোড অথবা হাইলাইট করা টেক্সট ব্যবহার করতে পারেন।

এখানে একটি বাহ্যিক লিঙ্ক রয়েছে।

মার্কডাউন ব্লক-লেভেল HTML এলিমেন্ট

markdown

<div class="alert alert-info">
  <h4>তথ্য</h4>
  <p>এটি HTML দিয়ে তৈরি একটি ইনফো অ্যালার্ট বক্স।</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>এটি একটি কাস্টম স্টাইল করা ব্লককোট।</p>
  <footer>—— উৎস</footer>
</blockquote>

রেন্ডার্ড আউটপুট:

তথ্য

এটি HTML দিয়ে তৈরি একটি ইনফো অ্যালার্ট বক্স।

এটি একটি কাস্টম স্টাইল করা ব্লককোট।
—— উৎস

মার্কডাউন সাধারণ HTML এনহ্যান্সমেন্ট

ইমেজ এনহ্যান্সমেন্ট

মার্কডাউন ইমেজ সাইজ কন্ট্রোল

markdown

<!-- ইমেজ সাইজ নিয়ন্ত্রণ করতে HTML ব্যবহার করুন -->
<img src="example.jpg" alt="স্যাম্পল ইমেজ" width="300" height="200">

<!-- রেসপন্সিভ ইমেজ -->
<img src="example.jpg" alt="রেসপন্সিভ ইমেজ" style="max-width: 100%; height: auto;">

<!-- ইমেজ অ্যালাইনমেন্ট -->
<div align="center">
  <img src="example.jpg" alt="সেন্টার্ড ইমেজ" width="400">
</div>

ইমেজ গ্যালারি

markdown

<div style="display: flex; gap: 10px; justify-content: center;">
  <img src="img1.jpg" alt="ইমেজ 1" style="width: 200px;">
  <img src="img2.jpg" alt="ইমেজ 2" style="width: 200px;">
  <img src="img3.jpg" alt="ইমেজ 3" style="width: 200px;">
</div>

<!-- ইমেজ গ্রিড -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="ইমেজ 1" style="width: 100%;">
  <img src="img2.jpg" alt="ইমেজ 2" style="width: 100%;">
  <img src="img3.jpg" alt="ইমেজ 3" style="width: 100%;">
  <img src="img4.jpg" alt="ইমেজ 4" style="width: 100%;">
</div>

ভিডিও এবং মিডিয়া এম্বেডিং

ভিডিও এম্বেড করা

markdown

<!-- YouTube ভিডিও -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- Bilibili ভিডিও -->
<iframe src="//player.bilibili.com/player.html?bvid=BV_ID&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        width="100%" 
        height="400">
</iframe>

<!-- HTML5 ভিডিও -->
<video controls width="100%" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  আপনার ব্রাউজার ভিডিও ট্যাগ সমর্থন করে না।
</video>

অডিও এম্বেড করা

markdown

<!-- HTML5 অডিও -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  আপনার ব্রাউজার অডিও এলিমেন্ট সমর্থন করে না।
</audio>

<!-- NetEase Cloud Music -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
        width="330" height="86" 
        src="//music.163.com/outchain/player?type=2&id=SONG_ID&auto=1&height=66">
</iframe>

টেবিল এনহ্যান্সমেন্ট

জটিল টেবিল স্ট্রাকচার

markdown

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">পণ্য</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">বিক্রয় ডেটা</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">মোট রাজস্ব</th>
    </tr>
    <tr style="background-color: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 8px;">Q1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">পণ্য A</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥100,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥120,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥220,000</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">পণ্য B</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥80,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥90,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥170,000</td>
    </tr>
  </tbody>
</table>

রেন্ডার্ড আউটপুট:

পণ্য	বিক্রয় ডেটা		মোট রাজস্ব
পণ্য	Q1	Q2	মোট রাজস্ব
পণ্য A	¥100,000	¥120,000	¥220,000
পণ্য B	¥80,000	¥90,000	¥170,000

ফর্ম এবং ইন্টারঅ্যাক্টিভ এলিমেন্ট

বেসিক ফর্ম এলিমেন্ট

markdown

<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">নাম:</label>
    <input type="text" id="name" name="name" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="email" style="display: block; margin-bottom: 0.5rem;">ইমেইল:</label>
    <input type="email" id="email" name="email" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="message" style="display: block; margin-bottom: 0.5rem;">বার্তা:</label>
    <textarea id="message" name="message" rows="4" 
              style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
    </textarea>
  </div>
  
  <button type="submit" 
          style="background-color: #007bff; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer;">
    জমা দিন
  </button>
</form>

ইন্টারঅ্যাক্টিভ এলিমেন্ট

markdown

<!-- কলাপসিবল কন্টেন্ট -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">আরও বিবরণের জন্য ক্লিক করুন</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>এটি কলাপসিবল সেকশনের ভিতরের বিস্তারিত কন্টেন্ট।</p>
    <p>আপনি এখানে যেকোনো HTML কন্টেন্ট অন্তর্ভুক্ত করতে পারেন।</p>
  </div>
</details>

<!-- প্রগ্রেস বার -->
<div style="margin: 1rem 0;">
  <label>প্রজেক্ট প্রগ্রেস:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- স্টার রেটিং -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

রেন্ডার্ড আউটপুট:

আরও বিবরণের জন্য ক্লিক করুন

এটি কলাপসিবল সেকশনের ভিতরের বিস্তারিত কন্টেন্ট।

আপনি এখানে যেকোনো HTML কন্টেন্ট অন্তর্ভুক্ত করতে পারেন।

প্রজেক্ট প্রগ্রেস:32%32%

★★★★☆

লেআউট এবং স্টাইলিং

ফ্লেক্সবক্স লেআউট

markdown

<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
  <div style="flex: 1;">
    <h4 style="margin: 0;">শিরোনাম</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">এটি একটি বিবরণ টেক্সট</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      অ্যাকশন
    </button>
  </div>
</div>

<!-- কার্ড লেআউট -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>কার্ড 1</h5>
    <p>কার্ড কন্টেন্ট বিবরণ</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>কার্ড 2</h5>
    <p>কার্ড কন্টেন্ট বিবরণ</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>কার্ড 3</h5>
    <p>কার্ড কন্টেন্ট বিবরণ</p>
  </div>
</div>

গ্রিড লেআউট

markdown

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0;">
  <div style="padding: 1rem; background-color: #e3f2fd; border-radius: 8px;">
    <h6>ফিচার 1</h6>
    <p>ফিচার বিবরণ</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>ফিচার 2</h6>
    <p>ফিচার বিবরণ</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>ফিচার 3</h6>
    <p>ফিচার বিবরণ</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>ফিচার 4</h6>
    <p>ফিচার বিবরণ</p>
  </div>
</div>

অ্যালার্ট এবং সতর্কতা

বিভিন্ন ধরণের অ্যালার্ট

markdown

<!-- ইনফো অ্যালার্ট -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 তথ্য:</strong> এটি একটি ইনফো অ্যালার্ট বক্স।
</div>

<!-- সাকসেস অ্যালার্ট -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ সফল:</strong> অপারেশন সফলভাবে সম্পূর্ণ হয়েছে।
</div>

<!-- ওয়ার্নিং অ্যালার্ট -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ সতর্কতা:</strong> এই গুরুত্বপূর্ণ বিজ্ঞপ্তিতে মনোযোগ দিন।
</div>

<!-- এরর অ্যালার্ট -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ ত্রুটি:</strong> একটি ত্রুটি ঘটেছে।
</div>

রেন্ডার্ড আউটপুট:

💡 তথ্য: এটি একটি ইনফো অ্যালার্ট বক্স।

✅ সফল: অপারেশন সফলভাবে সম্পূর্ণ হয়েছে।

⚠️ সতর্কতা: এই গুরুত্বপূর্ণ বিজ্ঞপ্তিতে মনোযোগ দিন।

❌ ত্রুটি: একটি ত্রুটি ঘটেছে।

থার্ড-পার্টি কন্টেন্ট এম্বেড করা

সোশ্যাল মিডিয়া

markdown

<!-- Twitter এম্বেড -->
<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">এটি একটি টুইট কন্টেন্ট...</p>
  <a href="https://twitter.com/user/status/123456789">টুইট লিঙ্ক</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Weibo এম্বেড -->
<iframe width="100%" height="500" class="share_self" 
        frameborder="0" scrolling="no" 
        src="https://widget.weibo.com/weiboshow/index.php?language=&width=0&height=500&fansRow=1&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1234567890&verifier=a1b2c3d4">
</iframe>

অনলাইন সার্ভিস

markdown

<!-- CodePen এম্বেড -->
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Animation Example" 
        src="https://codepen.io/user/embed/EXAMPLE?default-tab=html%2Cresult" 
        frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

<!-- JSFiddle এম্বেড -->
<iframe width="100%" height="300" 
        src="//jsfiddle.net/user/example/embedded/js,html,css,result/" 
        allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0">
</iframe>

<!-- Google Maps এম্বেড -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.0!2d116.4074!3d39.9042!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMznCsDU0JzE1LjEiTiAxMTbCsDI0JzI2LjYiRQ!5e0!3m2!1szh-CN!2scn!4v1234567890" 
        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

কাস্টম কম্পোনেন্ট

ট্যাগ এবং ব্যাজ

markdown

<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #007bff; color: white; border-radius: 3px;">
  ফ্রন্টএন্ড
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #28a745; color: white; border-radius: 3px;">
  React
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #ffc107; color: black; border-radius: 3px;">
  JavaScript
</span>

রেন্ডার্ড আউটপুট:

ফ্রন্টএন্ড React JavaScript

টাইমলাইন

markdown

<div style="position: relative; padding-left: 2rem;">
  <div style="position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background-color: #ddd;"></div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #007bff; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #007bff;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">ডিসেম্বর 2023</h5>
    <p style="margin: 0;">প্রজেক্ট শুরু, প্রয়োজনীয়তা বিশ্লেষণ এবং প্রযুক্তি নির্বাচন সম্পূর্ণ।</p>
  </div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #28a745; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #28a745;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">জানুয়ারি 2024</h5>
    <p style="margin: 0;">মূল ফিচার ডেভেলপমেন্ট, টেস্টিং ফেজে প্রবেশ।</p>
  </div>
  
  <div style="position: relative;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #6c757d; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #6c757d;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">ফেব্রুয়ারি 2024</h5>
    <p style="margin: 0;">প্রজেক্ট লঞ্চ এবং প্রচার শুরু।</p>
  </div>
</div>

নোট এবং সীমাবদ্ধতা

HTML নিরাপত্তা

markdown

<!-- ✅ নিরাপদ HTML -->
<div style="color: blue;">নিরাপদ স্টাইল</div>
<strong>বোল্ড টেক্সট</strong>
<em>ইটালিক টেক্সট</em>

<!-- ❌ সম্ভাব্যভাবে ফিল্টার করা কন্টেন্ট -->
<script>alert('অনিরাপদ স্ক্রিপ্ট')</script>
<iframe src="javascript:alert('XSS')"></iframe>
<object data="malicious.swf"></object>

মার্কডাউন পার্সার সামঞ্জস্যতা

বিভিন্ন মার্কডাউন পার্সারের HTML সাপোর্টের মাত্রা ভিন্ন:

পার্সার	HTML সাপোর্ট	সীমাবদ্ধতা
GitHub	আংশিক	স্ক্রিপ্ট এবং বিপজ্জনক ট্যাগ ফিল্টার করা
GitLab	আংশিক	নিরাপত্তা ফিল্টারিং
VitePress	সম্পূর্ণ	কনফিগারেশনের উপর নির্ভরশীল
Jekyll	সম্পূর্ণ	কনফিগারযোগ্য
Hugo	আংশিক	সক্ষম করতে হবে

সেরা অনুশীলন সুপারিশ

markdown

✅ সুপারিশকৃত:
1. সিম্যান্টিক HTML ট্যাগ ব্যবহার করুন
2. উপযুক্ত স্টাইল এনহ্যান্সমেন্ট যোগ করুন
3. কন্টেন্ট অ্যাক্সেসিবিলিটি নিশ্চিত করুন
4. কোড পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য রাখুন

❌ এড়িয়ে চলুন:
1. অত্যন্ত জটিল HTML অত্যধিক ব্যবহার
2. অনিরাপদ স্ক্রিপ্ট এম্বেড করা
3. মোবাইল অ্যাডাপ্টেশন উপেক্ষা করা
4. ডেপ্রিকেটেড ট্যাগ ব্যবহার করা

বাস্তব সিনারিও

1. পণ্য ডকুমেন্টেশন

markdown

<div style="display: flex; align-items: center; margin: 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px;">
  <div style="flex: 1;">
    <h2 style="margin: 0 0 0.5rem 0;">🚀 পণ্য ফিচার</h2>
    <p style="margin: 0; opacity: 0.9;">আমাদের একেবারে নতুন ফিচার এবং উন্নতি অভিজ্ঞতা নিন</p>
  </div>
  <div>
    <button style="background: rgba(255,255,255,0.2); border: 2px solid white; color: white; padding: 0.75rem 1.5rem; border-radius: 25px; cursor: pointer; backdrop-filter: blur(10px);">
      আরও জানুন
    </button>
  </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #007bff;">
    <h4 style="color: #007bff; margin: 0 0 1rem 0;">⚡ উচ্চ পারফরম্যান্স</h4>
    <p style="color: #666; line-height: 1.6;">সর্বোত্তম পারফরম্যান্সের জন্য অপ্টিমাইজড অ্যালগরিদম এবং আর্কিটেকচার।</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #28a745;">
    <h4 style="color: #28a745; margin: 0 0 1rem 0;">🔒 নিরাপদ এবং নির্ভরযোগ্য</h4>
    <p style="color: #666; line-height: 1.6;">এন্টারপ্রাইজ-গ্রেড নিরাপত্তা, এনক্রিপ্টেড ডেটা ট্রান্সমিশন এবং স্টোরেজ।</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #ffc107;">
    <h4 style="color: #e68900; margin: 0 0 1rem 0;">🎨 ব্যবহার করা সহজ</h4>
    <p style="color: #666; line-height: 1.6;">স্বজ্ঞাত ইউজার ইন্টারফেস এবং স্ট্রিমলাইনড ওয়ার্কফ্লো।</p>
  </div>
  
</div>

2. API ডকুমেন্টেশন

markdown

<div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 1rem 0;">
  <div style="display: flex; align-items: center; margin-bottom: 1rem;">
    <span style="background: #28a745; color: white; padding: 0.25rem 0.75rem; border-radius: 4px; font-weight: bold; font-size: 0.875rem;">POST</span>
    <code style="margin-left: 1rem; flex: 1; background: #e9ecef; padding: 0.5rem; border-radius: 4px;">/api/v1/users</code>
  </div>
  
  <h4 style="margin: 0 0 1rem 0;">ব্যবহারকারী তৈরি করুন</h4>
  <p style="color: #6c757d; margin: 0;">একটি নতুন ব্যবহারকারী অ্যাকাউন্ট তৈরি করুন</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 রিকোয়েস্ট প্যারামিটার
  </summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    
<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">প্যারামিটার</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">টাইপ</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">প্রয়োজনীয়</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">বিবরণ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>name</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">ব্যবহারকারীর নাম</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>email</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">ইমেইল ঠিকানা</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3. টিম পরিচিতি

markdown

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 আমাদের টিম</h2>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto;">
    
    <div style="text-align: center;">
      <img src="avatar1.jpg" alt="ঝাং সান" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #007bff;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">ঝাং সান</h4>
      <p style="color: #007bff; font-weight: bold; margin: 0 0 0.5rem 0;">ফ্রন্টএন্ড ইঞ্জিনিয়ার</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">React এবং Vue ডেভেলপমেন্টে ফোকাস, ইউজার এক্সপেরিয়েন্স ডিজাইনে উত্সাহী।</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
    <div style="text-align: center;">
      <img src="avatar2.jpg" alt="লি সি" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #28a745;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">লি সি</h4>
      <p style="color: #28a745; font-weight: bold; margin: 0 0 0.5rem 0;">ব্যাকএন্ড ইঞ্জিনিয়ার</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Node.js এবং Python-এ দক্ষ, সিস্টেম আর্কিটেকচার ডিজাইনে ফোকাস।</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
  </div>
</div>

টুলস এবং রিসোর্স

HTML/CSS ফ্রেমওয়ার্ক

Bootstrap: দ্রুত প্রোটোটাইপিং এবং রেসপন্সিভ ডিজাইন
Tailwind CSS: ইউটিলিটি-ফার্স্ট CSS ফ্রেমওয়ার্ক
Bulma: আধুনিক CSS ফ্রেমওয়ার্ক
Foundation: রেসপন্সিভ ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক

অনলাইন টুলস

CodePen: অনলাইন HTML/CSS/JS এডিটর
JSFiddle: কোড স্নিপেট টেস্টিং
CSS Grid Generator: CSS গ্রিড লেআউট জেনারেটর
Flexbox Froggy: ফ্লেক্সবক্স শেখার গেম

ব্রাউজার ডেভেলপার টুলস

Chrome DevTools: এলিমেন্ট ইন্সপেকশন এবং স্টাইল ডিবাগিং
Firefox Developer Tools: গ্রিড এবং ফ্লেক্সবক্স ডিবাগিং
Safari Web Inspector: macOS/iOS ডিবাগিং
Edge DevTools: অ্যাক্সেসিবিলিটি চেকিং

মনে রাখবেন, HTML এম্বেড করা শক্তিশালী হলেও, আপনার ডকুমেন্টেশন পঠনযোগ্য এবং রক্ষণাবেক্ষণযোগ্য রাখতে এটি পরিমিতভাবে ব্যবহার করুন।

মার্কডাউনে HTML এম্বেড করা ​

মার্কডাউন বেসিক HTML এম্বেডিং ​

মার্কডাউন ইনলাইন HTML এলিমেন্ট ​

মার্কডাউন ব্লক-লেভেল HTML এলিমেন্ট ​

তথ্য

মার্কডাউন সাধারণ HTML এনহ্যান্সমেন্ট ​

ইমেজ এনহ্যান্সমেন্ট ​

মার্কডাউন ইমেজ সাইজ কন্ট্রোল ​

ইমেজ গ্যালারি ​

ভিডিও এবং মিডিয়া এম্বেডিং ​

ভিডিও এম্বেড করা ​

অডিও এম্বেড করা ​

টেবিল এনহ্যান্সমেন্ট ​

জটিল টেবিল স্ট্রাকচার ​

ফর্ম এবং ইন্টারঅ্যাক্টিভ এলিমেন্ট ​

বেসিক ফর্ম এলিমেন্ট ​

ইন্টারঅ্যাক্টিভ এলিমেন্ট ​

লেআউট এবং স্টাইলিং ​

ফ্লেক্সবক্স লেআউট ​

গ্রিড লেআউট ​

অ্যালার্ট এবং সতর্কতা ​

বিভিন্ন ধরণের অ্যালার্ট ​

থার্ড-পার্টি কন্টেন্ট এম্বেড করা ​

সোশ্যাল মিডিয়া ​

অনলাইন সার্ভিস ​

কাস্টম কম্পোনেন্ট ​

ট্যাগ এবং ব্যাজ ​

টাইমলাইন ​

নোট এবং সীমাবদ্ধতা ​

HTML নিরাপত্তা ​

মার্কডাউন পার্সার সামঞ্জস্যতা ​

সেরা অনুশীলন সুপারিশ ​

বাস্তব সিনারিও ​

1. পণ্য ডকুমেন্টেশন ​

2. API ডকুমেন্টেশন ​

3. টিম পরিচিতি ​

সম্পর্কিত সিনট্যাক্স ​

টুলস এবং রিসোর্স ​

HTML/CSS ফ্রেমওয়ার্ক ​

অনলাইন টুলস ​

ব্রাউজার ডেভেলপার টুলস ​

মার্কডাউনে HTML এম্বেড করা

মার্কডাউন বেসিক HTML এম্বেডিং

মার্কডাউন ইনলাইন HTML এলিমেন্ট

মার্কডাউন ব্লক-লেভেল HTML এলিমেন্ট

মার্কডাউন সাধারণ HTML এনহ্যান্সমেন্ট

ইমেজ এনহ্যান্সমেন্ট

মার্কডাউন ইমেজ সাইজ কন্ট্রোল

ইমেজ গ্যালারি

ভিডিও এবং মিডিয়া এম্বেডিং

ভিডিও এম্বেড করা

অডিও এম্বেড করা

টেবিল এনহ্যান্সমেন্ট

জটিল টেবিল স্ট্রাকচার

ফর্ম এবং ইন্টারঅ্যাক্টিভ এলিমেন্ট

বেসিক ফর্ম এলিমেন্ট

ইন্টারঅ্যাক্টিভ এলিমেন্ট

লেআউট এবং স্টাইলিং

ফ্লেক্সবক্স লেআউট

গ্রিড লেআউট

অ্যালার্ট এবং সতর্কতা

বিভিন্ন ধরণের অ্যালার্ট

থার্ড-পার্টি কন্টেন্ট এম্বেড করা

সোশ্যাল মিডিয়া

অনলাইন সার্ভিস

কাস্টম কম্পোনেন্ট

ট্যাগ এবং ব্যাজ

টাইমলাইন

নোট এবং সীমাবদ্ধতা

HTML নিরাপত্তা

মার্কডাউন পার্সার সামঞ্জস্যতা

সেরা অনুশীলন সুপারিশ

বাস্তব সিনারিও

1. পণ্য ডকুমেন্টেশন

2. API ডকুমেন্টেশন

3. টিম পরিচিতি

সম্পর্কিত সিনট্যাক্স

টুলস এবং রিসোর্স

HTML/CSS ফ্রেমওয়ার্ক

অনলাইন টুলস

ব্রাউজার ডেভেলপার টুলস