এইচটিএমএল লেআউট টিউটোরিয়াল (বাংলায়)

এইচটিএমএল লেআউট হলো ওয়েব পেজের গঠন তৈরির প্রক্রিয়া। এই টিউটোরিয়ালে আমরা শিখব কীভাবে সিমান্টিক এইচটিএমএল এবং সিএসএস ফ্লেক্সবক্স/গ্রিড ব্যবহার করে লেআউট তৈরি করা যায়।

১. এইচটিএমএল লেআউট কী?

এইচটিএমএল লেআউট হলো ওয়েব পেজের বিভিন্ন অংশ (যেমন হেডার, নেভিগেশন, মেইন কন্টেন্ট, সাইডবার, ফুটার) সাজানোর প্রক্রিয়া। এটি:

• সিমান্টিক ট্যাগ (<header>, <nav>, <main>, <footer>) ব্যবহার করে।
• সিএসএস ফ্লেক্সবক্স বা গ্রিড দিয়ে আধুনিক লেআউট তৈরি করে।
• রেস্পন্সিভ ডিজাইনের মাধ্যমে মোবাইল এবং ডেস্কটপে অভিযোজিত হয়।

২. সাধারণ লেআউট উপাদান

• <header>: পেজের শীর্ষে হেডার এলাকা।
• <nav>: নেভিগেশন মেনু।
• <main>: প্রধান কন্টেন্ট এলাকা।
• <aside>: সাইডবার বা অতিরিক্ত তথ্য।
• <footer>: পেজের নিচে ফুটার এলাকা।

৩. লেআউট তৈরির উদাহরণ

<header>
    <h2>হেডার</h2>
</header>
<nav>
    <ul>
        <li><a href="#">হোম</a></li>
        <li><a href="#">পরিচিতি</a></li>
        <li><a href="#">যোগাযোগ</a></li>
    </ul>
</nav>
<main>
    <h3>প্রধান কন্টেন্ট</h3>
    <p>এটি ওয়েব পেজের প্রধান কন্টেন্ট এলাকা।</p>
</main>
<footer>
    <p>ফুটার &copy; ২০২৫</p>
</footer>
            

<style>
    .flex-container {
        display: flex;
        gap: 20px;
        margin: 20px 0;
    }
    .flex-main {
        flex: 3;
        background-color: #ffffff;
        padding: 20px;
        border-radius: 5px;
    }
    .flex-sidebar {
        flex: 1;
        background-color: #dfe6e9;
        padding: 20px;
        border-radius: 5px;
    }
</style>
<div class="flex-container">
    <main class="flex-main">
        <h3>প্রধান কন্টেন্ট</h3>
        <p>এটি ওয়েব পেজের প্রধান কন্টেন্ট এলাকা।</p>
    </main>
    <aside class="flex-sidebar">
        <h3>সাইডবার</h3>
        <p>এটি সাইডবারে অতিরিক্ত তথ্য।</p>
    </aside>
</div>
            

<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin: 20px 0;
    }
    .grid-item {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
        border: 1px solid #ddd;
    }
</style>
<div class="grid-container">
    <div class="grid-item">কার্ড ১</div>
    <div class="grid-item">কার্ড ২</div>
    <div class="grid-item">কার্ড ৩</div>
    <div class="grid-item">কার্ড ৪</div>
</div>
            

<style>
    @media (max-width: 768px) {
        .flex-container {
            flex-direction: column;
        }
    }
</style>
<div class="flex-container">
    <main class="flex-main">
        <h3>প্রধান কন্টেন্ট</h3>
        <p>এটি মোবাইল ডিভাইসে কলাম আকারে প্রদর্শিত হবে।</p>
    </main>
    <aside class="flex-sidebar">
        <h3>সাইডবার</h3>
        <p>মোবাইল ডিভাইসে এটি নিচে চলে যাবে।</p>
    </aside>
</div>
            

৪. লেআউট তৈরির টিপস

• সিমান্টিক ট্যাগ ব্যবহার করুন অ্যাক্সেসিবিলিটি এবং এসইও উন্নত করতে।
• ফ্লেক্সবক্স বা গ্রিড ব্যবহার করে আধুনিক এবং নমনীয় লেআউট তৈরি করুন।
• রেস্পন্সিভ ডিজাইনের জন্য মিডিয়া কোয়েরি ব্যবহার করুন।
• max-width এবং margin: 0 auto; ব্যবহার করে কন্টেন্ট কেন্দ্রে রাখুন।
• অতিরিক্ত নেস্টিং এড়িয়ে কোড পরিষ্কার রাখুন।
• মোবাইল-ফার্স্ট ডিজাইন পদ্ধতি গ্রহণ করুন।