HTML Examples

উদাহরণ সহ HTML এর সমস্ত বিষয়

HTML কোর্সের সম্পূর্ণ বিষয়বস্তু

মৌলিক HTML

উন্নত HTML

এইচটিএমএল উপাদান

উন্নত সুবিধা

এইচটিএমএল এন্ট্রি এবং গ্রাফিক্স

অতিরিক্ত সুবিধা

1এইচটিএমএল বেসিক

HTML নথি

প্রতিটি HTML নথির একটি নির্দিষ্ট কাঠামো রয়েছে:

উদাহরণ: বেসিক HTML ডকুমেন্ট

<!DOCTYPE html> <html> <মাথা> <title>প্রথম HTML পৃষ্ঠা</title> </head> <body> <h1>হ্যালো ওয়ার্ল্ড!</h1> <p>এটি আমার প্রথম HTML পৃষ্ঠা।</p> </body> </html>

এইচটিএমএল হেডার

HTML এ 6টি শিরোনাম স্তর রয়েছে:

উদাহরণ: সমস্ত হেডার অবস্থান

<h1>প্রধান শিরোনাম</h1> <h2>উপশিরোনাম</h2> <h3>সাবটাইটেল</h3> <h4>উপ-উপশিরোনাম</h4> <h5>সাবটাইটেল</h5> <h6>খুব ছোট শিরোনাম</h6>

এইচটিএমএল কলাম

অনুচ্ছেদ তৈরি করতে <p> ট্যাগ ব্যবহার করা হয়:

উদাহরণ: অনুচ্ছেদ

<p>এটি একটি অনুচ্ছেদ। HTML এ অনুচ্ছেদ স্বয়ংক্রিয়ভাবে উপরে এবং নীচের মার্জিন আছে।</p>

❓ব্যায়াম: কোন HTML ট্যাগ সবচেয়ে বড় শিরোনাম তৈরি করে?

<h6>
✗ ভুল! <h6> হল সবচেয়ে ছোট শিরোনাম
<h1>
✓ ঠিক আছে! <h1> হল সবচেয়ে বড় শিরোনাম

2HTML বৈশিষ্ট্য

শিরোনাম বৈশিষ্ট্য

উপাদানটিতে অতিরিক্ত তথ্য বহন করে:

<p title="এটি একটি টুলটিপ">৷ যন্ত্রের সাহায্যে অনুচ্ছেদ </p>

href বৈশিষ্ট্য

লিঙ্কের জন্য ব্যবহৃত:

<a href="https://jassifteam.com"> জাসিফ দলের ওয়েবসাইট </a>

alt বৈশিষ্ট্য

ছবির জন্য Alt টেক্সট প্রদান করে:

<img src="logo.jpg" alt="Jassif Team Logo">

⚠️সতর্কতা: উদ্ধৃতি ছাড়া বৈশিষ্ট্য

উদ্ধৃতিগুলিতে সর্বদা বৈশিষ্ট্যের মানগুলি আবদ্ধ করুন:

<!-- ঠিক আছে --> <a href="page.html">লিঙ্ক</a>৷ <!-- ভুল --> <a href=page.html>লিঙ্ক</a>

3এইচটিএমএল হেডার

HTML অনুভূমিক নিয়ম

<hr> ট্যাগ একটি অনুভূমিক নিয়ম তৈরি করে:

উদাহরণ

<h1>শিরোনাম 1</h1> <hr> <p>কিছু পাঠ্য</p>

HTML Head

<head> বিভাগে নথি সম্পর্কে অতিরিক্ত তথ্য রয়েছে:

উদাহরণ

<মাথা> <title>আমার ওয়েব পৃষ্ঠা</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <স্টাইল> body { পটভূমির রঙ: হালকা নীল; } </style> </head>

4এইচটিএমএল কলাম

ট্যাক্স বিরতি

<br> ট্যাগ একটি লাইন বিরতি তৈরি করে:

উদাহরণ

<p>এটি প্রথম লাইন।<br> এটি দ্বিতীয় লাইন।<br> এটি তৃতীয় লাইন।</p>

প্রাক ট্যাগ

<pre> ট্যাগ প্রাক-ফরম্যাট করা পাঠ্য প্রদর্শন করে:

উদাহরণ

<প্রে> লাইন 1 লাইন 2 ইন্ডেন্টেড লাইন লাইন 3 </pre>

5এইচটিএমএল শৈলী

পটভূমির রঙ

<body style="background-color: lightblue;">
</body>

পাঠ্যের রঙ

<p style="color: red;">৷ লাল টেক্সট </p>

পাঠ্য প্রান্তিককরণ

<p style="text-align: center;">৷ কেন্দ্রে সারিবদ্ধ পাঠ্য </p>

💡টিপ: শৈলীর গুরুত্ব

CSS শৈলী নিম্নলিখিত ক্রমে প্রয়োগ করা হয়:

  1. ইনলাইন শৈলী (খুব উচ্চ অগ্রাধিকার)
  2. অভ্যন্তরীণ শৈলী (<style> ট্যাগ)
  3. বাহ্যিক শৈলী ফাইল (সর্বনিম্ন গুরুত্বপূর্ণ)

6এইচটিএমএল টেক্সট ফরম্যাটিং

উদাহরণ: সমস্ত ফরম্যাটিং ট্যাগ

<b>বোল্ড লেখা</b> <strong>গুরুত্বপূর্ণ পাঠ্য</strong> <i>ইটালিক টেক্সট</i> <em>জোর দেওয়া পাঠ্য</em> <small>ছোট টেক্সট</small> <চিহ্ন>চিহ্নিত পাঠ্য</mark> <del>মোছা পাঠ্য</del> <ins>পাঠ্য যোগ করা হয়েছে</ins> H<sub>2</sub>O (সাবস্ক্রিপ্ট) x<sup>2</sup> (সুপারস্ক্রিপ্ট)

7HTML উদ্ধৃতি এবং উদ্ধৃতি উল্লেখ

সংক্ষিপ্ত উদ্ধৃতি

<q>সংক্ষিপ্ত উদ্ধৃতি</q>

ভলিউম উদ্ধৃতি

<blockquote> দীর্ঘ উদ্ধৃতি </blockquote>

সংক্ষিপ্ত রূপ

<abbr title="Hyper Text Markup Language">
HTML
</abbr>

8HTML মন্তব্য

উদাহরণ: বিভিন্ন ধরনের প্রতিক্রিয়া

<!-- নৈমিত্তিক মন্তব্য --> <p>প্রদর্শনের জন্য পাঠ্য</p> <!-- একাধিক লাইন মন্তব্য করুন --> <!-- নিষ্ক্রিয় কোড: <p>এই অনুচ্ছেদটি প্রদর্শিত হবে না</p> -->

9 HTML CSS

ইনলাইন সিএসএস

<p style="color: blue; font-size: 16px;">৷ ইনলাইন শৈলী </p>

অভ্যন্তরীণ সিএসএস

<style>
    body {
        background-color: lightgray;
    }
    h1 {
        color: navy;
    }
</style>

বাহ্যিক CSS

<link rel="stylesheet" href="styles.css">

10এইচটিএমএল লিঙ্ক

সম্পূর্ণ URL

<a href="https://jassifteam.com"> বাহ্যিক লিঙ্ক </a>

নির্ভরশীল URL

<a href="about.html">৷ অভ্যন্তরীণ লিঙ্ক </a>

নতুন ট্যাবে খুলুন

<a href="page.html" target="_blank">৷ নতুন ট্যাবে খুলুন </a>

11এইচটিএমএল ছবি

মৌলিক চিত্র

<img src="photo.jpg" alt="description">

মাত্রা সহ চিত্র

<img src="photo.jpg" alt="বর্ণনা" width="300" height="200">৷

CSS সহ ছবির আকার

<img src="photo.jpg" alt="বর্ণনা" style="width:300px;height:200px;">৷

12এইচটিএমএল টেবিল

উদাহরণ: মৌলিক টেবিল

<টেবিল বর্ডার="1"> <tr> <th>নাম</th> <th>বয়স</th> </tr> <tr> <td>রমন</td> <td>25</td> </tr> </ টেবিল>

13এইচটিএমএল তালিকা

একটি অবিন্যস্ত তালিকা

<ul><li> <li>কফি</li> <li>চা</li> </ul>

একটি সাজানো তালিকা

<ol> <li>প্রথম</li> <li>সেকেন্ড</li> </ol>

14এইচটিএমএল ব্লক এবং ইনলাইন উপাদান

উদাহরণ

<!-- ব্লক উপাদান --> <div>এটি একটি ব্লক</div> <!-- ইনলাইন উপাদান --> <p>এটি হল <span>ইনলাইন</span> উপাদান</p>

15HTML Div উপাদান

উদাহরণ: Div গঠন

<div style="background: lightblue; padding: 20px;">৷ <h2>শিরোনাম</h2> <p>কিছু পাঠ্য</p> </div>

16এইচটিএমএল ক্লাস

উদাহরণ

<div class="container"> <p class="text-red">লাল টেক্সট</p> <p class="text-blue">নীল পাঠ্য</p> </div>

17 HTML Id

উদাহরণ

<div id="header"> হোম পেজ </div> <div id="content"> বিষয়বস্তু এলাকা </div>

18 HTML Layout

উদাহরণ: বেসিক লেআউট

<div id="header">হোম</div> <div id="nav">নেভিগেশন</div> <div id="content">সামগ্রী</div> <div id="footer">পাদচরণ</div>

19 HTML IFrame

উদাহরণ

<iframe src="https://jassifteam.com" 
        width="500" height="300">
</iframe>

20 HTML Head Elements

উদাহরণ: পরম মাথা

<মাথা> <title>পৃষ্ঠার শিরোনাম</title> <meta charset="UTF-8"> <meta name="description" content="description"> <meta name="keywords" content="HTML, CSS">৷ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css">৷ <style>/* অভ্যন্তরীণ CSS */</style> </head>

21 HTML Scripts

জাভাস্ক্রিপ্ট যোগ করুন

<script> সতর্কতা ('হ্যালো!'); </script>

বাহ্যিক জাভাস্ক্রিপ্ট

<script src="script.js"></script>

22 HTML Computercode Elements

উদাহরণ

<code>কোড</code> <kbd>কীবোর্ড ইনপুট</kbd> <samp>প্রোগ্রাম আউটপুট</samp> <var>ভেরিয়েবল</var>

23 HTML Forms

উদাহরণ: মৌলিক ফর্ম

<form action="/submit" method="post"> <label for="name">নাম:</label> <ইনপুট টাইপ="টেক্সট" আইডি="নাম" নাম="নাম">৷ <input type="submit" value="Submit">৷ </form>

24 HTML Form Elements

পাঠ্য ক্ষেত্র

<input type="text" name="username">

পাসওয়ার্ড

<input type="password" name="password">

নির্বাচন বার

<name="city"> নির্বাচন করুন৷ <option value="chn">চেন্নাই</option> <option value="mdu">মাদুরাই</option> </select>

25 HTML Input Types

সাধারণ ইনপুট প্রকার

<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="date">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="submit">
<input type="button">

26 HTML Input Attributes

placeholder

<ইনপুট প্রকার="পাঠ্য" placeholder="enter your name">

required

<input type="text" name="email" required>

readonly

<ইনপুট প্রকার="পাঠ্য" মান="পরিবর্তন করা যাবে না" শুধুমাত্র পঠন>

27 HTML Canvas Graphics

উদাহরণ: মৌলিক ক্যানভাস

<canvas id="myCanvas" width="200" height="100">
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 150, 75);
</script>

28 HTML SVG Graphics

বৃত্ত

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" 
            fill="red"/>
</svg>

আয়তক্ষেত্র

<svg width="200" height="100">
    <rect width="150" height="80" 
          fill="blue"/>
</svg>

29 HTML Media

ভিডিও

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

শব্দ

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

30 HTML Geolocation

উদাহরণ: অবস্থান পেতে

<বোতাম onclick="getLocation()"> অবস্থান পান </ বোতাম> <script> ফাংশন getLocation() { যদি (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } } </script>

31 HTML Local Storage

উদাহরণ

<script> // সংরক্ষণ করুন localStorage.setItem("নাম", "রমন"); // পান var নাম = localStorage.getItem("name"); // মুছুন localStorage.removeItem("নাম"); </script>

32 HTML Media Examples

উদাহরণ: YouTube ভিডিও

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

33 More HTML Examples

Drag and Drop

<div draggable="true">টেনে আনা যায়</div>৷

Web Workers

<script>
var worker = new Worker("worker.js");
</script>

Progress Bar

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

❓চূড়ান্ত অনুশীলন: HTML এ অবস্থানের তথ্য পেতে কোন API ব্যবহার করা হয়?

Storage API
✗ ভুল! ডেটা স্টোরেজের জন্য স্টোরেজ API
Geolocation API
✓ ঠিক আছে! জিওলোকেশন এপিআই লোকেশনের তথ্য পেতে ব্যবহার করা হয়