এইচটিএমএল | সিএস‌এস ট্যাগ সমূহ | HTML - CSS TAG নতুনদের জন্য | Potiva Tech

<div>

  <h1>এইটা H1 ট্যাগ</h1>

  <h2>এইটা H2 ট্যাগ</h2>

  <h3>এইটা H3 ট্যাগ</h3>

  <h4>এইটা H4 ট্যাগ</h4>

  <h5>এইটা H5 ট্যাগ</h5>

  <h6>এইটা H6 ট্যাগ</h6>

</div>

<div>

  <p>এইটা একটি প্যারাগ্রাফ ট্যাগ</p>

</div>

<div>

  <br>

  <hr>

</div>

<div>

  <a href="https://example.com" target="_blank">এইটা একটি লিংক</a>

</div>

<div>

  <img src="https://via.placeholder.com/150" alt="demo">

</div>

<div>

  <ul>

    <li>তালিকা ১</li>

    <li>তালিকা ২</li>

  </ul>

  <ol>

    <li>প্রথম</li>

    <li>দ্বিতীয়</li>

  </ol>

</div>

<div>

  <b>Bold</b>

  <i>Italic</i>

  <u>Underline</u>

  <mark>হাইলাইট</mark>

</div>

<div>

  <div>এইটা ডিভ</div>

  <span>এইটা স্প্যান</span>

</div>

<div>

  <form>

    <input type="text" placeholder="নাম"><br>

    <input type="email" placeholder="ইমেল"><br>

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

  </form>

</div>

<div>

  <video width="250" controls>

    <source src="video.mp4" type="video/mp4">

  </video>

  <audio controls>

    <source src="audio.mp3" type="audio/mpeg">

  </audio>

</div>

<div>

  <table border="1">

    <tr><th>নাম</th><th>বয়স</th></tr>

    <tr><td>শাগর</td><td>২০</td></tr>

  </table>

</div>

<div>

  <button>ক্লিক করো</button>

</div>

<div>

  <blockquote>এইটা উদ্ধৃতি</blockquote>

</div>

<div>

  <abbr title="HyperText Markup Language">HTML</abbr>

</div>

<div>

  <address>শাগর, shagor@example.com</address>

</div>

<div>

  <details>

    <summary>আরও পড়ুন</summary>

    <p>বিস্তারিত লেখা</p>

  </details>

</div>

<div>

  <progress value="80" max="100"></progress>

</div>

<div>

  <meter value="0.6">60%</meter>

</div>

<div>

  <iframe src="https://example.com" width="300" height="200"></iframe>

</div>

<div>

  <pre>

আমি শিখছি:

- HTML

- CSS

- JavaScript

  </pre>

</div>

<style>

  .red-text {

    color: red;

  }

  .blue-bg {

    background-color: #007BFF;

    color: white;

    padding: 10px;

  }

  .center-text {

    text-align: center;

  }

  .border-box {

    border: 2px solid black;

    padding: 10px;

  }

  .rounded {

    border: 2px solid gray;

    border-radius: 15px;

    padding: 10px;

  }

  .shadow {

    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);

    padding: 10px;

  }

  .hover-effect:hover {

    background-color: yellow;

    color: black;

  }

  .font-style {

    font-family: 'Courier New', monospace;

    font-size: 18px;

    font-weight: bold;

  }

  .size-box {

    width: 200px;

    height: 100px;

    background: lightgreen;

  }

  .responsive-box {

    background: orange;

    padding: 10px;

  }

  @media (max-width: 600px) {

    .responsive-box {

      background: red;

    }

  }

</style>

<div class="red-text">লাল লেখা</div>

<div class="blue-bg">নীল ব্যাকগ্রাউন্ড</div>

<div class="center-text">সেন্টার টেক্সট</div>

<div class="border-box">বর্ডার বক্স</div>

<div class="rounded">রাউন্ড বক্স</div>

<div class="shadow">শেডো বক্স</div>

<div class="hover-effect">হোভার করলে রঙ পাল্টাবে</div>

<div class="font-style">স্টাইলড ফন্ট</div>

<div class="size-box">ফিক্সড সাইজ</div>

<div class="responsive-box">রেসপন্সিভ বক্স</div>