HTML ការរៀបចំ

ওয়েবসাইটস সাধারণত বহু স্তম্ভে কনটেন্ট প্রদর্শন করে (ম্যাগাজিন এবং সংবাদপত্রের মতো)。

ডিভ ইলেমেন্টের এইচটিএমএল লেআউট

মন্তব্য:ডিভ ইলেমেন্ট সাধারণত লেআউট টুল হিসাবে ব্যবহৃত হয়, কারণ তা সহজেই CSS-এর মাধ্যমে তার অবস্থান নির্ধারণ করা যায়。

এই উদাহরণটিতে চারটি <div> ইলিমেন্ট ব্যবহার করে বহুস্তরীয় লেআউট তৈরি করা হয়:

ইনস্ট্যান্স

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
লন্ডন<br>
প্যারিস<br>
টোকিও<br>
</div>
<div id="section">
<h1>London</h1>
<p>
লন্ডন ইংল্যান্ডের রাজধানী। এটি যুক্তরাজ্যের সবচেয়ে জনবহুল শহর,
একটি ১৩ মিলিয়নেরও বেশি অধিবাসী সম্পন্ন মেট্রোপলিটান এলাকা নিয়ে গঠিত।
</p>
<p>
থ্যামস নদীর পাশে দাঁড়িয়ে, লন্ডন দুই সহস্রাব্দীর ধরে একটি প্রধান বসতিস্থল হয়েছে,
এটার ইতিহাস রোমানদের দ্বারা নামকরণ হওয়ার সময় থেকেই গড়ে উঠেছে, যারা তাকে লন্ডিনিয়াম নামকরণ করেছিলেন।
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS：

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

HTML5-র ব্যবহারের ওয়েবসাইট লেআউট

HTML5-র নতুন সেম্যান্টিক ইলিমেন্টগুলি ওয়েবসাইটের বিভিন্ন অংশকে নির্ধারণ করে:

HTML5 សមាសភាពចំលើយ

header ডকুমেন্ট বা সেকশনের হেডার নির্ধারণ
nav নেভিগেশন লিঙ্কের কনটেনার নির্ধারণ
section ডকুমেন্টের সেকশন নির্ধারণ
article স্বতন্ত্র স্বসমাধানকারী নিবন্ধ নির্ধারণ
aside বিষয় বাইরের বিষয় (যেমন পার্শ্ববর্তী কলাম) নির্ধারণ
footer ডকুমেন্ট বা সেকশনের পদক্ষেপ নির্ধারণ
details অতিরিক্ত বিবরণ নির্ধারণ
summary details তত্ত্বকে শিরোনাম নির্ধারণ

এই উদাহরণটিতে <header>, <nav>, <section>, এবং <footer> এবং ব্যবহার করে বহুস্তরীয় লেআউট তৈরি করা হয়:

ইনস্ট্যান্স

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
লন্ডন<br>
প্যারিস<br>
টোকিও<br>
</nav>
<section>
<h1>London</h1>
<p>
লন্ডন ইংল্যান্ডের রাজধানী। এটি যুক্তরাজ্যের সবচেয়ে জনবহুল শহর,
একটি ১৩ মিলিয়নেরও বেশি অধিবাসী সম্পন্ন মেট্রোপলিটান এলাকা নিয়ে গঠিত।
</p>
<p>
থ্যামস নদীর পাশে দাঁড়িয়ে, লন্ডন দুই সহস্রাব্দীর ধরে একটি প্রধান বসতিস্থল হয়েছে,
এটার ইতিহাস রোমানদের দ্বারা নামকরণ হওয়ার সময় থেকেই গড়ে উঠেছে, যারা তাকে লন্ডিনিয়াম নামকরণ করেছিলেন।
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

টেবিল ব্যবহারকারী HTML লেআউট

মন্তব্য:টেবিল ইলেমেন্টটি লেআউট টুল হিসাবে নয় ডিজাইন করা হয়েছে。

টেবিল ইলেমেন্টটির কাজ টেবিলাইজড ডাটা দেখানোর জন্য হয়。

টেবিল ইলেমেন্টটি ব্যবহার করে লেআউট প্রভাব পাওয়া যায়, কারণ টেবিল ইলেমেন্টটির শৈলী সেট করা যায় CSS-এর মাধ্যমে:

ইনস্ট্যান্স

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    টেবিল ইলেমেন্টটি লেআউট টুল হিসাবে নয় ডিজাইন করা হয়েছে。
  </td>
</tr>
</table>
</body>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>