ক্যাটাগরি ট্রিগার :

6/recent/ticker-posts

HTML এর কয়েকটি ধাপ

July 19, 2025

 

✅ প্রথম HTML ওয়েবপেজ বানানোর ধাপ

🧰 যা লাগবে:

  • একটি টেক্সট এডিটর (যেমন: Notepad, VS Code, Sublime Text)

  • একটি ব্রাউজার (যেমন: Chrome, Firefox)

🔨 ধাপ ১: একটি .html ফাইল তৈরি করো

  1. কম্পিউটারে একটা ফোল্ডার বানাও → যেমন: my-website

  2. এর মধ্যে নতুন ফাইল তৈরি করো → index.html

  3. ফাইলটি খুলো Notepad বা VS Code দিয়ে

🧾 ধাপ ২: নিচের HTML কোডটি লেখো


<!DOCTYPE html>
<html>
  <head>
    <title>আমার প্রথম ওয়েবপেজ</title>
  </head>
  <body>
    <h1>স্বাগতম আমার ওয়েবসাইটে!</h1>
    <p>এটা আমার জীবনের প্রথম ওয়েবপেজ।</p>
    <img src="https://via.placeholder.com/200" alt="উদাহরণ ছবি">
    <br>
    <a href="https://www.google.com" target="_blank">গুগলে যাও</a>
  </body>
</html>

🌐 ধাপ ৩: ওয়েবপেজ চালাও

  1. সেই index.html ফাইলটিতে ডাবল ক্লিক করো

  2. এটা তোমার ব্রাউজারে খুলবে

  3. তুমি দেখবে: হেডিং, প্যারাগ্রাফ, ছবি ও লিংক

🔍 ব্যাখ্যা:

ট্যাগকাজ
<!DOCTYPE html>ব্রাউজারকে বলে এটা HTML5
<html>পুরো ওয়েবপেজের শুরু
<head>মেটা তথ্য, টাইটেল ইত্যাদি
<title>ব্রাউজারের ট্যাবে নাম দেখাবে
<body>এখানে পেজের মূল কনটেন্ট থাকে
<h1>হেডলাইন
<p>প্যারাগ্রাফ
<img>ছবি
<a>লিংক



✨ আজ আমরা করব:

  1. HTML ফাইলে কিছু CSS যোগ করব (যাতে ডিজাইন সুন্দর হয়)

  2. আরেকটা বাটন ও তালিকা (list) যুক্ত করব

🔧 আপডেট করা HTML + CSS সহ ওয়েবপেজ:


<!DOCTYPE html>
<html>
  <head>
    <title>আমার ওয়েবসাইট</title>
    <style>
      body {
        background-color: #f2f2f2;
        font-family: Arial, sans-serif;
        text-align: center;
        padding: 20px;
      }

      h1 {
        color: #2c3e50;
      }

      p {
        color: #555;
      }

      a {
        text-decoration: none;
        color: white;
        background-color: #3498db;
        padding: 10px 20px;
        border-radius: 5px;
        display: inline-block;
        margin-top: 10px;
      }

      ul {
        list-style-type: square;
        color: #333;
        text-align: left;
        max-width: 300px;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <h1>স্বাগতম আমার ওয়েবসাইটে!</h1>
    <p>এটা আমার জীবনের প্রথম ওয়েবপেজ, যেখানে আমি HTML ও CSS ব্যবহার করছি।</p>

    <img src="https://via.placeholder.com/200" alt="উদাহরণ ছবি">

    <br><br>
    <a href="https://www.google.com" target="_blank">গুগলে যাও</a>

    <h2>আমার কাজের তালিকা</h2>
    <ul>
      <li>HTML শেখা</li>
      <li>CSS শেখা</li>
      <li>JavaScript শেখা</li>
    </ul>
  </body>
</html>

✅ তুমি এই কোড দিয়ে শিখবে:

  • CSS দিয়ে রং, ফন্ট ও স্টাইল কিভাবে করা হয়

  • তালিকা কিভাবে তৈরি করা হয়

  • লিংককে বাটনের মতো দেখতে কিভাবে করা যায়


আপনার প্রিয়জনের সাথে শেয়ার করুন

আপনার মন্তব্য পোস্ট করুন

0 Comments