এই ওয়েবসাইটটি Google Analytics এবং Google Adsense এবং Giscus ব্যবহার করে। আমাদের পড়ুন
শর্তাবলী এবং গোপনীয়তা নীতি
প্রকাশিত

ওয়েব ডিজাইন অ্যান্ড ডেভেলপমেন্ট সম্পূর্ণ কোর্স বাংলায় দ্বিতীয় পর্ব

লেখক
  • avatar
    Name
    Mohammed Nasim
    টুইটার
    @nasimStg
সূচিপত্র


# HTML এর মৌলিক বিষয়সমূহ এইচটিএমএল (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ) ওয়েব পেজ তৈরি করতে ব্যবহৃত স্ট্যান্ডার্ড ভাষা। এটি একটি মার্কআপ ভাষা, যার অর্থ হল এটি ভিজ্যুয়াল ডিজাইনের পরিবর্তে ওয়েব পৃষ্ঠাগুলির গঠন এবং বিন্যাস তৈরি করতে ব্যবহৃত হয়। HTML উপাদানগুলির একটি সিরিজ নিয়ে গঠিত, প্রতিটি একটি ট্যাগ দ্বারা প্রতিনিধিত্ব করা হয়, যা একটি ওয়েব পৃষ্ঠার গঠন এবং বিষয়বস্তু নির্ধারণ করতে ব্যবহৃত হয়। এই ট্যাগগুলি সাধারণত কোণ বন্ধনী দ্বারা বেষ্টিত থাকে এবং বেশিরভাগ ট্যাগ জোড়ায় আসে, একটি খোলা এবং বন্ধ ট্যাগ সহ। সাধারণ HTML ট্যাগের কিছু উদাহরণের মধ্যে রয়েছে:

  • <html> এই ট্যাগটি একটি HTML নথির শুরু এবং শেষ নির্ধারণ করতে ব্যবহৃত হয়।
  • <head> এই ট্যাগটি নথি সম্পর্কে তথ্য ধারণ করতে ব্যবহৃত হয়, যেমন শিরোনাম এবং মেটা ডেটা।
  • <body> এই ট্যাগটি ওয়েব পেজের দৃশ্যমান বিষয়বস্তু ধারণ করতে ব্যবহৃত হয়।
  • <h1>এই ট্যাগ একটি শিরোনাম তৈরি করতে ব্যবহার করা হয়. শিরোনামের বিভিন্ন স্তর রয়েছে,
    যেখানে <h1> সবচেয়ে গুরুত্বপূর্ণ এবং <h6> সবচেয়ে কম গুরুত্বপূর্ণ।
  • <p>এই ট্যাগটি একটি অনুচ্ছেদ তৈরি করতে ব্যবহৃত হয়।
  • <a>এই ট্যাগটি অন্য ওয়েব পেজের লিঙ্ক তৈরি করতে ব্যবহৃত হয়।
  • <img>এই ট্যাগটি একটি ওয়েব পেজে একটি ছবি যোগ করতে ব্যবহৃত হয়।

একটি সাধারণ html ওয়েবপেজ

index.html
    <!DOCTYPE html>
    <html>
    <head>
        <title>My Web Page</title>
    </head>
    <body>
	    <h1>Welcome to my web page</h1>
	    <p>This is a simple web page created using HTML.</p>
	    <p>Here is a link to <a href="https://www.example.com">Example</a> website. </p>
	     <img src="image.jpg" alt="Image">
     </body>
     </html>

এইচটিএমএল ট্যাগ বলতে কী বুঝায় ?

একটি এইচটিএমএল ট্যাগ হল এক ধরণের মার্কআপ যা একটি ওয়েব পেজের গঠন এবং বিন্যাস নির্ধারণ করতে ব্যবহৃত হয়। এটি একটি নাম নিয়ে গঠিত, যা সাধারণত কোণ বন্ধনী দ্বারা বেষ্টিত থাকে এবং কখনও কখনও অতিরিক্ত বৈশিষ্ট্যগুলি উপাদান সম্পর্কে আরও তথ্য প্রদান করে। উদাহরণস্বরূপ, একটি অনুচ্ছেদ উপাদান তৈরি করতে <p> ট্যাগ ব্যবহার করা হয়। আপনি যখন একটি ওয়েব পেজে একটি অনুচ্ছেদ তৈরি করতে চান, আপনি অনুচ্ছেদের শুরুতে ওপেনিং <p> ট্যাগ এবং অনুচ্ছেদের শেষে ক্লোজিং <p> ট্যাগ ব্যবহার করবেন। ট্যাগের মধ্যে থাকা টেক্সট হল অনুচ্ছেদের বিষয়বস্তু। html <p>This is a paragraph of text.</p> আরেকটি উদাহরণ হল <a> ট্যাগ যা হাইপারলিঙ্ক তৈরি করতে ব্যবহৃত হয়। <a> ট্যাগে href নামক একটি বৈশিষ্ট্য রয়েছে যা লিঙ্ক করা পেজের URL নির্দেশ করে।

<a href="https://www.example.com">Example</a>

এটি "Example" বলে একটি লিঙ্ক তৈরি করবে এবং ক্লিক করা হলে, এটি ব্যবহারকারীকে "www.example.com" ওয়েবসাইটে নিয়ে যাবে৷

সংক্ষেপে, HTML ট্যাগগুলি ওয়েব পৃষ্ঠাগুলির গঠন এবং বিন্যাস সংজ্ঞায়িত করতে এবং বিভিন্ন ধরণের সামগ্রী কীভাবে প্রদর্শিত হবে তা নির্দেশ করতে ব্যবহৃত হয়। এগুলি এইচটিএমএল নথির বিল্ডিং ব্লক এবং ওয়েব পৃষ্ঠাগুলির মৌলিক কাঠামো তৈরি করতে ব্যবহৃত হয়।

এইচটিএমএল ট্যাগের প্রকারভেদঃ

বিভিন্ন ধরনের HTML ট্যাগ রয়েছে, প্রতিটিরই একটি নির্দিষ্ট উদ্দেশ্য এবং ফাংশন রয়েছে। কিছু প্রধান ধরনের HTML ট্যাগের মধ্যে রয়েছে:

  • স্ট্রাকচারাল ট্যাগ: এই ট্যাগগুলি একটি ওয়েব পৃষ্ঠার মৌলিক কাঠামো তৈরি করতে ব্যবহৃত হয়, যেমন শিরোনাম, অনুচ্ছেদ এবং তালিকা। উদাহরণগুলির মধ্যে রয়েছে <html>, <head>, <body>, <h1>, <p>, <ol> এবং <ul>।
  • শব্দার্থিক ট্যাগ: এই ট্যাগগুলি একটি ওয়েব পৃষ্ঠার বিষয়বস্তুর অর্থ এবং গঠন বর্ণনা করতে ব্যবহৃত হয়। উদাহরণগুলির মধ্যে রয়েছে <header>, <nav>, <article>, <aside>, <footer>, <time> এবং <mark>।
  • লিঙ্ক ট্যাগ: এই ট্যাগগুলি একই ওয়েব পৃষ্ঠায় অন্যান্য ওয়েব পৃষ্ঠা বা নির্দিষ্ট অবস্থানের লিঙ্ক তৈরি করতে ব্যবহৃত হয়। উদাহরণগুলির মধ্যে রয়েছে <a> এবং <link>।
  • মিডিয়া ট্যাগ: এই ট্যাগগুলি একটি ওয়েব পৃষ্ঠায় বিভিন্ন ধরণের মিডিয়া যেমন ছবি, ভিডিও এবং অডিও যোগ করতে ব্যবহৃত হয়। উদাহরণগুলির মধ্যে রয়েছে <img>, <video>, <audio>, এবং <source>।
  • ফর্ম ট্যাগ: এই ট্যাগগুলি ব্যবহারকারীর ইনপুটের জন্য ফর্ম তৈরি করতে ব্যবহৃত হয়। উদাহরণগুলির মধ্যে রয়েছে <form>, <input>, <textarea>, <select>, <option>, <label>, এবং <button>।
  • মেটা ট্যাগ: এই ট্যাগগুলি ওয়েব পৃষ্ঠা সম্পর্কে মেটাডেটা প্রদান করে, যেমন কীওয়ার্ড, বিবরণ এবং অক্ষর এনকোডিং। উদাহরণগুলির মধ্যে রয়েছে <meta>, <base> ।
  • অপ্রচলিত ট্যাগ: এগুলি এমন ট্যাগ যা এইচটিএমএল এর পূর্ববর্তী সংস্করণগুলিতে ব্যবহৃত হয়েছিল কিন্তু আর ব্যবহারের জন্য সুপারিশ করা হয় না। উদাহরণগুলির মধ্যে রয়েছে <font>, <center>, <strike> ।

সামগ্রিকভাবে, HTML ট্যাগগুলিকে 3টি প্রধান বিভাগে ভাগ করা যেতে পারে:

  • Containers , যা অন্যান্য উপাদান ধারণ করে এবং তাদের গোষ্ঠীভুক্ত করতে ব্যবহৃত হয়।
  • Content tags , যা প্রকৃত বিষয়বস্তু নির্ধারণ করতে ব্যবহৃত হয়।
  • Meta tags , যা নথি সম্পর্কে অতিরিক্ত তথ্য প্রদান করতে ব্যবহৃত হয়।

এইচটিএমএল ট্যাগসমূহঃ

অনেকগুলি ভিন্ন ভিন্ন HTML ট্যাগ রয়েছে যা একটি ওয়েব পৃষ্ঠা তৈরি করতে ব্যবহার করা যেতে পারে, প্রতিটির নিজস্ব নির্দিষ্ট ফাংশন এবং উদ্দেশ্য রয়েছে। এখানে কিছু সাধারণভাবে ব্যবহৃত এইচটিএমএল ট্যাগগুলির একটি তালিকা রয়েছে, সাথে সেগুলি কীভাবে ব্যবহার করা যেতে পারে তার একটি উদাহরণ রয়েছে:

সূচিপত্র

  • <html>

    এই ট্যাগটি একটি HTML নথির (ডকুমেন্ট) শুরু এবং শেষ নির্ধারণ করতে ব্যবহৃত হয়। এটি সাধারণত একটি HTML নথিতে প্রথম এবং শেষ ট্যাগ।

    index.html
    <!DOCTYPE html>
<html>
<!-- content of the web page -->
</html>

  • এই ট্যাগটি নথি সম্পর্কে তথ্য ধারণ করতে ব্যবহৃত হয়, যেমন শিরোনাম এবং মেটা ডেটা। হেড ট্যাগের ভিতরের বিষয়বস্তু ওয়েব পেজে দৃশ্যমান নয়।

    index.html
    <head>
	<title>My Web Page</title>
	<meta charset="UTF-8">
</head>

  • <body>

    এই ট্যাগটি ওয়েব পেজের দৃশ্যমান বিষয়বস্তু ধারণ করতে ব্যবহৃত হয়।

    index.html
        <body>
        <h1>Welcome to my web page</h1>
        <p>This is a simple web page created using HTML.</p>
    </body>

  • <h1>

    এই ট্যাগ একটি শিরোনাম তৈরি করতে ব্যবহার করা হয়. শিরোনামের বিভিন্ন স্তর রয়েছে, যেখানে <h1> সবচেয়ে গুরুত্বপূর্ণ এবং <h6> সবচেয়ে কম গুরুত্বপূর্ণ।

    index.html
    <h1> This is heading 1</h1>
<h2> This is heading 2</h2>
<h3> This is heading 3</h3>
<h4> This is heading 4</h4>
<h5> This is heading 5</h5>
<h6> This is heading 6</h6>

  • <p>

    এই ট্যাগটি একটি অনুচ্ছেদ তৈরি করতে ব্যবহৃত হয়। 

    <p>This is a paragraph of text.</p>

  • <a>

    এই ট্যাগটি অন্য ওয়েব পেজের লিঙ্ক তৈরি করতে ব্যবহৃত হয়।

    <a href="https://www.example.com">Example</a>

  • <img>

    এই ট্যাগটি একটি ওয়েব পেজে একটি ছবি যোগ করতে ব্যবহৃত হয়।

    <img src="image.jpg" alt="Image" />

  • <ul>

    এই ট্যাগটি একটি ক্রমবিহীন তালিকা তৈরি করতে ব্যবহৃত হয়।

    <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

  • <ol>

    এই ট্যাগটি একটি সাজানো তালিকা তৈরি করতে ব্যবহৃত হয় ।

    <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

  • <li>

    এই ট্যাগটি একটি তালিকা আইটেম তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত <ul> বা <ol> ট্যাগের ভিতরে ব্যবহৃত হয়।

    <li>Item</li>

  • <div>

    এই ট্যাগটি উপাদানগুলিকে একত্রে গোষ্ঠীবদ্ধ করতে এবং তাদের উপর শৈলী প্রয়োগ করতে ব্যবহৃত হয়৷<div>: এই ট্যাগটি উপাদানগুলিকে একত্রিত করতে এবং তাদের উপর শৈলী প্রয়োগ করতে ব্যবহৃত হয়৷

    div.html
        <div id="container">
        <p>This is a paragraph of text.</p>
        <p>This is another paragraph of text.</p>
    </div>
    ```

  • <span>

    এই ট্যাগটি ইনলাইন উপাদানগুলিকে একত্রিত করতে এবং তাদের উপর শৈলী প্রয়োগ করতে ব্যবহৃত হয় ।

    <h1>this is a <span>simple</span> heading</h1>

  • এটি ভূমিকা বা নেভিগেশনাল লিঙ্কগুলির একটি গ্রুপের জন্য একটি ধারক সংজ্ঞায়িত করতে ব্যবহৃত হয়।

    header.html
    <header>
    <h1>Welcome to my website</h1>
    <nav>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

  • এটি নেভিগেশন লিঙ্কগুলির একটি সেট সংজ্ঞায়িত করতে ব্যবহৃত হয়।

    navigation.html
        <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </nav>

  • <article>

    এটি একটি নথিতে একটি স্বয়ংসম্পূর্ণ রচনা সংজ্ঞায়িত করতে ব্যবহৃত হয়, যেমন একটি ফোরাম পোস্ট, একটি ম্যাগাজিন বা সংবাদপত্রের নিবন্ধ, বা একটি ব্লগ এন্ট্রি৷

    article.html
    <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
    <p>Additional content goes here.</p>
</article>

  • <aside>

    এটি একটি পৃষ্ঠার একটি বিভাগকে সংজ্ঞায়িত করতে ব্যবহৃত হয় যেখানে এমন বিষয়বস্তু রয়েছে যা মূল বিষয়বস্তুর সাথে সম্পর্কিত, কিন্তু বিষয়বস্তুর একটি পৃথক অংশ হিসাবে একা দাঁড়াতে পারে।

    aside.html
        <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </aside>
    ```

  • এটি একটি নথি বা একটি বিভাগের ফুটারের জন্য একটি ধারক সংজ্ঞায়িত করতে ব্যবহৃত হয়।

    <footer>
  <p>Copyright © 2021 My Website</p>
</footer>

  • <form>

    এটি ব্যবহারকারীর ইনপুটের জন্য একটি ফর্ম তৈরি করতে ব্যবহৃত হয়।

    form.html
    <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <input type="submit" value="Submit">
</form>

  • <input>

    এটি বিভিন্ন ধরনের ইনপুট ক্ষেত্র তৈরি করতে ব্যবহৃত হয় যেমন টেক্সট, পাসওয়ার্ড, চেকবক্স, রেডিও, সাবমিট ইত্যাদি।

    <input type="text" id="name" name="name" placeholder="Enter your name" />

  • <select>

    এটি একটি ড্রপ-ডাউন তালিকা তৈরি করতে ব্যবহৃত হয়।

    <label for="cars">Select a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

  • <textarea>

    এটি পাঠ্যের জন্য একটি বহু-লাইন ইনপুট ক্ষেত্র তৈরি করতে ব্যবহৃত হয়।

    <textarea id="message" name="message" rows="10" cols="30"></textarea>

  • <label>

    এটি একটি ইনপুট উপাদানের জন্য একটি লেবেল তৈরি করতে ব্যবহৃত হয়।

    <label for="email">Email:</label> <input type="email" id="email" name="email" />

  • <button>

    এটি একটি ক্লিকযোগ্য বোতাম তৈরি করতে ব্যবহৃত হয়।

    <button type="submit">Submit</button>
```

  • <table>

    এটি একটি টেবিল তৈরি করতে ব্যবহৃত হয়।

    table.html
    <table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

  • <tr>

    এটি একটি টেবিল সারি তৈরি করতে ব্যবহৃত হয়।

    <tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
</tr>

  • <th> এবং <td>

    এই ট্যাগগুলি টেবিল সেল তৈরি করতে ব্যবহৃত হয়, যেখানে <th> হেডার সেলের জন্য ব্যবহার করা হয় এবং নিয়মিত সেলগুলির জন্য <td> ব্যবহার করা হয়।

    <th>Header 1</th>
<td>Row 1, Cell 1</td>

  • <style>

    এটি CSS শৈলীর জন্য একটি বিভাগ সংজ্ঞায়িত করতে ব্যবহৃত হয়।

    <style>
  body {
    background-color: #f1f1f1;
    font-family: Arial, sans-serif;
  }
  h1 {
    color: #333;
  }
</style>

  • এটি একটি বহিরাগত CSS ফাইলের সাথে লিঙ্ক করতে ব্যবহৃত হয়।

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

  • <meta>

    এটি ওয়েব পৃষ্ঠা সম্পর্কে মেটাডেটা প্রদান করতে ব্যবহৃত হয়, যেমন কীওয়ার্ড, বিবরণ এবং অক্ষর এনকোডিং।

    <meta name="keywords" content="html, tags, examples" />
<meta name="description" content="A list of commonly used HTML tags with examples" />

এটি সমস্ত এইচটিএমএল ট্যাগের একটি সম্পূর্ণ তালিকা নয় তবে এটি সর্বাধিক ব্যবহৃত ট্যাগগুলিকে কভার করে৷ আরও অনেক এইচটিএমএল ট্যাগ উপলব্ধ রয়েছে যা বিশেষ উদ্দেশ্যে ব্যবহার করা যেতে পারে।

Discuss on Twitter • View on GitHub