HTML এর হাতেখড়ি (পর্ব

সিরিজের দশম ও শেষ পর্ব — Mini Project: একটা Landing Page।

নয়টা পর্ব পেরিয়ে এখন আমরা HTML-এর প্রায় সবকিছু জানি — Heading, Text, Link, Image, List, Table, Form, Semantic HTML, Div/Span, Media। আজকের এই শেষ পর্বে আমরা এই সবকিছু একসাথে ব্যবহার করে একটা সম্পূর্ণ Landing Page বানাবো — শুধু HTML দিয়ে, কোনো CSS ছাড়াই।

মনে রাখবে: যেহেতু আমরা এখনো CSS শিখিনি, তাই পেজটা দেখতে সাদামাটা লাগবে — বর্ডার নেই, রঙ নেই, সুন্দর স্পেসিং নেই। এটাই স্বাভাবিক। এই পর্বের লক্ষ্য হলো কাঠামো (structure) সঠিকভাবে বানানো শেখা, সুন্দর দেখানো না। পরের সিরিজ "CSS এর হাতেখড়ি"-তে এই একই পেজকে আমরা সুন্দর করে সাজাবো।

আমরা কী বানাবো

একটা কাল্পনিক ফ্রিল্যান্স ওয়েব ডেভেলপারের পোর্টফোলিও ল্যান্ডিং পেজ, যেখানে থাকবে:

একটা হেডার ও নেভিগেশন মেনু
একটা পরিচিতি সেকশন
স্কিল লিস্ট
প্রজেক্ট শোকেস (টেবিল আকারে)
একটা কন্টাক্ট ফর্ম
একটা ফুটার

ধাপ ১: কাঠামো ঠিক করা

প্রথমে আমরা semantic ট্যাগ দিয়ে পেজের বড় বড় অংশ সাজাবো — এটা পর্ব ৭-এ শেখা কনসেপ্ট:

<body>
  <header></header>
  <nav></nav>
  <main>
    <section id="about"></section>
    <section id="skills"></section>
    <section id="projects"></section>
    <section id="contact"></section>
  </main>
  <footer></footer>
</body>

ধাপ ২: প্রতিটা সেকশন ভরাট করা

এবার প্রতিটা সেকশনে আগের পর্বগুলোতে শেখা ট্যাগ বসাবো — heading, paragraph, list, image, table, form।

সম্পূর্ণ কোড

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>আরিফ — ওয়েব ডেভেলপার</title>
</head>
<body>

  <header>
    <h1>আরিফ</h1>
    <p>ফ্রিল্যান্স ওয়েব ডেভেলপার</p>
  </header>

  <nav>
    <ul>
      <li><a href="#about">পরিচিতি</a></li>
      <li><a href="#skills">দক্ষতা</a></li>
      <li><a href="#projects">প্রজেক্ট</a></li>
      <li><a href="#contact">যোগাযোগ</a></li>
    </ul>
  </nav>

  <main>

    <section id="about">
      <h2>আমার সম্পর্কে</h2>
      <img src="profile.jpg" alt="আরিফের প্রোফাইল ছবি" width="150">
      <p>আমি একজন <strong>সেল্ফ-টট ওয়েব ডেভেলপার</strong>,
      যিনি <em>Firebase, Cloudflare</em> এবং vanilla JavaScript
      নিয়ে কাজ করতে ভালোবাসেন।</p>
    </section>

    <hr>

    <section id="skills">
      <h2>আমার দক্ষতা</h2>
      <ul>
        <li>HTML ও Semantic Markup</li>
        <li>JavaScript (Vanilla)</li>
        <li>Firebase & Cloudflare Workers</li>
        <li>PWA ডেভেলপমেন্ট</li>
      </ul>
    </section>

    <hr>

    <section id="projects">
      <h2>সাম্প্রতিক প্রজেক্ট</h2>
      <table>
        <thead>
          <tr>
            <th>প্রজেক্টের নাম</th>
            <th>ধরন</th>
            <th>লিংক</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Midnight Craving</td>
            <td>PWA Dashboard</td>
            <td><a href="#" target="_blank">দেখো</a></td>
          </tr>
          <tr>
            <td>Pathokghar</td>
            <td>Ebook Platform</td>
            <td><a href="#" target="_blank">দেখো</a></td>
          </tr>
        </tbody>
      </table>

      <article>
        <h3>সাম্প্রতিক ব্লগ পোস্ট</h3>
        <p>HTML শেখার এই সিরিজ লিখতে গিয়ে যা শিখলাম...</p>
      </article>
    </section>

    <hr>

    <section id="contact">
      <h2>যোগাযোগ করো</h2>
      <form action="/submit" method="post">
        <label for="name">নাম:</label><br>
        <input type="text" id="name" name="name" required
          placeholder="তোমার নাম লেখো"><br><br>

        <label for="email">ইমেইল:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <label for="msg">বার্তা:</label><br>
        <textarea id="msg" name="msg" rows="4"></textarea><br><br>

        <button type="submit">পাঠাও</button>
      </form>
    </section>

  </main>

  <footer>
    <p>© ২০২৬ আরিফ। সর্বস্বত্ব সংরক্ষিত।</p>
    <p>
      <a href="mailto:arif@example.com">ইমেইল</a> |
      <a href="tel:+8801XXXXXXXXX">ফোন</a>
    </p>
  </footer>

</body>
</html>

এই কোডে কোন কোন পর্বের শেখা জিনিস ব্যবহার হয়েছে

পর্ব	এই পেজে যেখানে ব্যবহার হয়েছে
পর্ব ১ ও ২	বেসিক স্ট্রাকচার, heading, strong/em
পর্ব ৩	প্রোফাইল ছবি, anchor link, mailto/tel
পর্ব ৪	দক্ষতার unordered list
পর্ব ৫	প্রজেক্ট টেবিল
পর্ব ৬	কন্টাক্ট ফর্ম
পর্ব ৭	header, nav, main, section, article, footer

এরপর কী?

এই পেজটাই এখন সাদামাটা দেখাচ্ছে, কিন্তু কাঠামো সম্পূর্ণ সঠিক। এই একই HTML পেজ নিয়ে আমরা পরের সিরিজে:

CSS দিয়ে রঙ, ফন্ট, স্পেসিং, রেসপন্সিভ লেআউট যোগ করবো
JavaScript দিয়ে ফর্ম সাবমিশন, নেভিগেশন অ্যানিমেশন, ইন্টারঅ্যাকশন যোগ করবো

নিজে চেষ্টা করো

Exercise:

উপরের কোডটা কপি করে নিজের নাম, দক্ষতা, প্রজেক্ট দিয়ে বদলে ফেলো
নিজের একটা ছবি যোগ করো
নিজের আরও দুইটা প্রজেক্ট টেবিলে যোগ করো
পুরো পেজটা ব্রাউজারে ওপেন করে ঘুরে ঘুরে দেখো — nav-এর প্রতিটা লিংকে ক্লিক করে দেখো সঠিক সেকশনে নিয়ে যাচ্ছে কিনা

সিরিজ শেষ — অভিনন্দন!

এই দশ পর্ব শেষ করে তুমি এখন HTML-এর একটা শক্তপোক্ত ভিত্তি পেয়ে গেছো — heading থেকে form, semantic markup থেকে media embed, সবকিছু। এটাই যেকোনো ওয়েব ডেভেলপমেন্ট শেখার প্রথম ও সবচেয়ে গুরুত্বপূর্ণ ধাপ।

পরের সিরিজ "CSS এর হাতেখড়ি"-তে দেখা হবে, যেখানে আমরা এই সাদামাটা পেজগুলোকে রঙিন ও সুন্দর করে তুলবো।

প্রশ্ন বা মতামত থাকলে কমেন্টে জানাতে পারো।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ

HTML এর হাতেখড়ি (পর্ব – ১০)