Loading..

পাঠসংশ্লিষ্ট ছবি/ইমেজ

রিসেট

২৯ আগস্ট, ২০২৫ ০২:১৪ অপরাহ্ণ

HTML ট্যাগ দিয়ে হোমপেইজ ডিজাইন দেখালাম

ধরনঃ সাধারণ শিক্ষা

শ্রেণিঃ দ্বাদশ

বিষয়ঃ তথ্য ও যোগাযোগ প্রযুক্তি

অধ্যায়ঃ অধ্যায় ৪

মনিরুল হক, 

আমরা কী বানাচ্ছিঃ

একটি শিক্ষাপ্রতিষ্ঠান/ব্যক্তিগত ব্লগ টাইপ হোমপেজ, যেখানে থাকবে—

  • শীর্ষে ব্র্যান্ডিং ও ন্যাভিগেশন (<header>, <nav>)

  • হিরো সেকশন (শিরোনাম, সাবটাইটেল, বাটন) (<section>)

  • দ্রুত তথ্য কার্ড/ফিচার (<section>, <article>)

  • সাম্প্রতিক ব্লগ/নোটিস (<section>, <article>)

  • পাশের গুরুত্বপূর্ণ লিংক/ঘোষণা (<aside>)

  • ফুটার (<footer>)

  • কন্টাক্ট/সাবস্ক্রাইব ফর্ম (<form>)

  • ছবি ও ক্যাপশন ডেমো (<figure>, <figcaption>)

 

সম্পূর্ণ কোড (কপি করে index.html নামে সেভ করে ব্রাউজারে খুলুন)ঃ

<!DOCTYPE html>

<html lang="bn">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>আমার ওয়েবসাইট — হোম</title>

  <meta name="description" content="HTML ট্যাগ ব্যবহার করে তৈরি একটি ডেমো হোমপেজ। শিক্ষামূলক উদাহরণ।">

 

  <!-- বেসিক স্টাইল: শেখার সুবিধার জন্য একই ফাইলে -->

  <style>

    :root { --brand:#0b6efd; --ink:#1f2937; --muted:#6b7280; --bg:#f8fafc; --card:#ffffff; }

    * { box-sizing: border-box; }

    html,body { margin:0; padding:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", "Noto Sans", sans-serif; color:var(--ink); background:var(--bg); }

    a { color:var(--brand); text-decoration: none; }

    a:hover { text-decoration: underline; }

    .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

 

    /* Header & Nav */

    header { background:#fff; border-bottom:1px solid #e5e7eb; position: sticky; top:0; z-index:10; }

    .brand { display:flex; align-items:center; gap:10px; padding:14px 0; }

    .brand img { width:36px; height:36px; border-radius:8px; }

    nav ul { list-style:none; display:flex; gap:18px; margin:0; padding:0; }

    nav a { padding:10px 0; font-weight:600; color:#334155; }

    .header-row { display:flex; justify-content:space-between; align-items:center; }

 

    /* Hero */

    .hero { padding:56px 0 40px; }

    .hero h1 { font-size: clamp(28px, 4vw, 42px); margin:0 0 10px; }

    .hero p { color:var(--muted); margin:0 0 18px; }

    .btn { display:inline-block; background:var(--brand); color:#fff; padding:12px 18px; border-radius:10px; font-weight:700; }

    .btn:hover { opacity:.92; }

 

    /* Grid cards */

    .grid { display:grid; gap:18px; }

    @media (min-width:768px){ .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } }

    .card { background:var(--card); border:1px solid #e5e7eb; border-radius:14px; padding:18px; }

    .card h3 { margin:0 0 8px; font-size:20px; }

    .muted { color:var(--muted); }

 

    /* Main layout */

    main { padding:30px 0 60px; }

    .content { display:grid; gap:22px; }

    @media (min-width:980px){ .content { grid-template-columns: 2fr 1fr; } }

 

    /* Articles */

    article h4 { margin:0 0 6px; font-size:18px; }

    article time { font-size:13px; color:var(--muted); }

 

    /* Aside */

    aside { position: sticky; top:72px; height: fit-content; }

    aside ul { margin:0; padding-left:18px; }

 

    /* Figure */

    figure { margin:0; }

    figure img { width:100%; border-radius:12px; border:1px solid #e5e7eb; }

    figcaption { font-size:13px; color:var(--muted); margin-top:6px; }

 

    /* Footer */

    footer { background:#0f172a; color:#cbd5e1; padding:28px 0; }

    footer a { color:#93c5fd; }

 

    /* Form */

    form { display:grid; gap:12px; }

    label { font-weight:600; }

    input, textarea, select { width:100%; padding:10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }

  </style>

</head>

 

<body>

  <!-- Header + Nav -->

  <header>

    <div class="container header-row" role="navigation" aria-label="প্রধান ন্যাভিগেশন">

      <div class="brand">

        <img src="https://dummyimage.com/72x72/0b6efd/ffffff.png&text=WS" alt="সাইট লোগো">

        <strong>আমার ওয়েবসাইট</strong>

      </div>

      <nav>

        <ul>

          <li><a href="#home">হোম</a></li>

          <li><a href="#features">ফিচার</a></li>

          <li><a href="#blog">ব্লগ</a></li>

          <li><a href="#contact">যোগাযোগ</a></li>

        </ul>

      </nav>

    </div>

  </header>

 

  <!-- Hero -->

  <section id="home" class="hero">

    <div class="container">

      <h1>স্বাগতম—শুধু HTML ট্যাগ দিয়ে তৈরি এই হোমপেজ</h1>

      <p>শেখার জন্য আদর্শ কাঠামো: semantic ট্যাগ, ন্যাভ, সেকশন, আর্টিকেল, অ্যাসাইড—সব এক পাতায়।</p>

      <a class="btn" href="#features">ফিচার দেখুন</a>

    </div>

  </section>

 

  <!-- Main -->

  <main class="container">

    <div class="content">

      <!-- Left: main content -->

      <div class="left">

        <!-- Features -->

        <section id="features" class="grid grid-3">

          <article class="card">

            <h3>দ্রুত, পরিষ্কার কাঠামো</h3>

            <p class="muted">`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<footer>`—সব একসাথে।</p>

          </article>

          <article class="card">

            <h3>অ্যাক্সেসিবিলিটি</h3>

            <p class="muted">`aria-label`, অর্থপূর্ণ ট্যাগ, সঠিক `<alt>` টেক্সট—স্ক্রিন রিডার ফ্রেন্ডলি।</p>

          </article>

          <article class="card">

            <h3>রেসপনসিভ গ্রিড</h3>

            <p class="muted">CSS Grid দিয়ে মোবাইল-ডেস্কটপে সুন্দর লে-আউট।</p>

          </article>

        </section>

 

        <!-- Featured Image -->

        <section class="card" aria-labelledby="campus-title" style="margin-top:18px;">

          <h3 id="campus-title">ডেমো ব্যানার</h3>

          <figure>

            <img src="https://dummyimage.com/1200x480/e2e8f0/111827.png&text=Banner" alt="ডেমো ব্যানার ছবি">

            <figcaption>উদাহরণ ছবি: `<figure>` ও `<figcaption>` ট্যাগের ব্যবহার।</figcaption>

          </figure>

        </section>

 

        <!-- Blog / Notices -->

        <section id="blog" style="margin-top:18px;">

          <h2>সাম্প্রতিক পোস্ট</h2>

          <div class="grid grid-2" role="list">

            <article class="card" role="listitem">

              <header>

                <h4>HTML ট্যাগ বুঝবো কিভাবে?</h4>

                <time datetime="2025-08-29">২৯ আগস্ট ২০২৫</time>

              </header>

              <p class="muted">শুরু করুন স্ট্রাকচারাল ট্যাগ দিয়ে—`<header>`, `<main>`, `<footer>`। তারপর কনটেন্ট ট্যাগ।</p>

              <a href="#">আরও পড়ুন</a>

            </article>

 

            <article class="card" role="listitem">

              <header>

                <h4>ফর্ম ট্যাগে প্রথম পদক্ষেপ</h4>

                <time datetime="2025-08-20">২০ আগস্ট ২০২৫</time>

              </header>

              <p class="muted">`<form>`, `<label>`, `<input>`, `<textarea>`, `<button>`—সঠিক লেবেলিং জরুরি।</p>

              <a href="#">আরও পড়ুন</a>

            </article>

          </div>

        </section>

 

        <!-- Contact Form -->

        <section id="contact" class="card" style="margin-top:18px;">

          <h2>যোগাযোগ করুন</h2>

          <form action="#" method="post">

            <div>

              <label for="name">নাম</label>

              <input id="name" name="name" type="text" placeholder="আপনার নাম" required>

            </div>

            <div>

              <label for="email">ইমেইল</label>

              <input id="email" name="email" type="email" placeholder="[email protected]" required>

            </div>

            <div>

              <label for="topic">বিষয়</label>

              <select id="topic" name="topic">

                <option>সাধারণ জিজ্ঞাসা</option>

                <option>ভর্তি সংক্রান্ত</option>

                <option>সহযোগিতা</option>

              </select>

            </div>

            <div>

              <label for="msg">বার্তা</label>

              <textarea id="msg" name="message" rows="4" placeholder="আপনার বার্তা লিখুন…"></textarea>

            </div>

            <button class="btn" type="submit">পাঠান</button>

          </form>

        </section>

      </div>

 

      <!-- Right: sidebar -->

      <aside aria-label="সহায়ক সাইডবার">

        <section class="card">

          <h3>দ্রুত লিংক</h3>

          <ul>

            <li><a href="#home">হোম</a></li>

            <li><a href="#features">ফিচার</a></li>

            <li><a href="#blog">ব্লগ</a></li>

            <li><a href="#contact">যোগাযোগ</a></li>

          </ul>

        </section>

 

        <section class="card" style="margin-top:18px;">

          <h3>ঘোষণা</h3>

          <p class="muted">রক্ষণাবেক্ষণ: শুক্রবার রাত ১০টা—১২টা।</p>

        </section>

      </aside>

    </div>

  </main>

 

  <!-- Footer -->

  <footer role="contentinfo">

    <div class="container">

      <p>© ২০২৫ — আমার ওয়েবসাইট. সব অধিকার সংরক্ষিত।</p>

      <p>তথ্য: <a href="#contact">যোগাযোগ</a> · <a href="#">প্রাইভেসি</a> · <a href="#">টার্মস</a></p>

    </div>

  </footer>

</body>

</html>

 

কোন ট্যাগ কেনঃ

  • <header>, <nav>: উপরের ব্র্যান্ডিং ও মেনু। স্ক্রিন রিডার বুঝতে পারে—এটা ন্যাভিগেশন।

  • <main>: পাতার মূল কনটেন্ট। SEO ও অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।

  • <section>: পেজের যৌক্তিক ভাগ—হিরো, ফিচার, ব্লগ, কন্টাক্ট।

  • <article>: স্বতন্ত্র কনটেন্ট ইউনিট—একেকটি পোস্ট/কার্ড।

  • <aside>: পাশের তথ্য—দ্রুত লিংক, ঘোষণা।

  • <figure>, <figcaption>: ছবি + ক্যাপশনকে অর্থপূর্ণ করে।

  • <form>, <label>, <input>, <textarea>, <button>, <select>: যোগাযোগ/সাবস্ক্রাইব—সঠিক লেবেলিং অ্যাক্সেসিবিলিটির জন্য অপরিহার্য।

  • <footer>: কপিরাইট, নীতিমালা, লোয়ার ন্যাভ।

 

ব্যবহার টিপসঃ

  • ফাইল স্ট্রাকচার: এখন এক ফাইলেই সব আছে। বাস্তবে CSS/JS আলাদা ফাইলে রাখবেন।

  • ইমেজ: ডেমো ইমেজ লিংক বদলে নিজের ছবি ব্যবহার করুন, সাথে অর্থপূর্ণ alt দিন।

  • বাংলা ফন্ট: প্রয়োজন হলে Google Fonts থেকে Noto Sans Bengali যোগ করতে পারেন।

  • SEO: <meta name="description"> ঠিক রাখুন; প্রতিটি পাতায় আলাদা টাইটেল দিন।


 

মোঃ মনিরুল হক

সহকারী শিক্ষক

আমলাবাড়ী মাধ্যমিক বিদ্যালয়

খোকসা, কুষ্টিয়া

০১৭২২২৭৩২৭২

 

মন্তব্য করুন

সম্পর্কিত পোস্ট