HTML এ লেআউট বা কাঠামো তৈরিঃ

HTML Layouts

একটি ওয়েব পেইজের ভিতরে কয়েকটি অংশ থাকে। যেমন- header, menu, submenu, sidemenu, content, footermenu, footer ইত্যাদি। এইসকল অংশগুলো ওয়েব পেইজের কোথায় কিভাবে থাকবে তা নির্ধারন করে তৈরি করাকেই ওয়েব সাইটের লেআউট বলে। ওয়েব সাইটের সৌন্দর্য নির্ভর করে লেআইটের উপর। আগে শুধু HTML ব্যবহার করেই লেআউট তৈরি করা হতো কিন্তু এখন HTML এর সাথে CSC (Cascading Style Sheets) ব্যবহার করে লেআউট তৈরি করা হয়।

লেআউট তৈরিতে ব্যবহৃত ট্যাগঃ

লেআউট তৈরিতে দুই ধরনের ট্যাগ ব্যবহার করা হয়।

১। টেবিল <table> -- </table> ট্যাগঃ শুধুমাত্র HTML ব্যবহার করে লেআউট তৈরি করা হয়।
২। ডিভ <div> -- </div> ট্যাগঃ HTML ও CSC একত্রে ব্যবহার করে লেআউট তৈরি করা হয়।

টেবিল <table> -- </table> ট্যাগ ব্যবহার করে লেআউট তৈরিঃ

<table border="1" width="600">
 
<tr align="center" bgcolor="#FFA500">
<td colspan="2"> header of webpage </td>
</tr>
 
<tr align="center" bgcolor="#FFD700">
<td colspan="2"> main menu </td>
</tr>
 
<tr>
<td width="150" bgcolor="#FFE900"> <p><u>side menu </u></p>
<div><a href="#">HTML</a></div>
<div><a href="#">CSS</a></div>
<div><a href="#">java</a></div>
<div><a href="#">Oracall</a></div>
</td>
<td width="450" align="center" bgcolor="#EEEEEE"> Main content of website.</td>
</tr>
 
<tr align="center" bgcolor="#FFEEEE">
<td colspan="2"> footer menu </td>
</tr>
 
<tr align="center" bgcolor="#FFA500">
<td colspan="2"> footer </td>
</tr>
 
</table>

এর আউটপুট হলোঃ

header of webpage
main menu
side menu HTML CSS java Oracall	Main content of website.
footer menu
footer

ডিভ <div> -- </div> ট্যাগ ব্যবহার করে লেআউট তৈরিঃ

<div style="width:600px">

<div align="center" style="background-color:#FFA500">
<td> header of webpage </td>
</div>

<div align="center" style="background-color:#FFD700">
<td> main menu </td>
</div>

<div style="width:150px; background-color:#FFE900; float:left"> 
<p><u>side menu </u></p>
<div><a href="#">HTML</a></div>
<div><a href="#">CSS</a></div>
<div><a href="#">java</a></div>
<div><a href="#">Oracall</a></div>
</div>
<div style="width:450px; background-color:#EEEEEE; text-align:center"> 
Main content of website.
</div>

<div align="center" style="background-color:#FFEEEE; clear:both">
<td> footer menu </td>
</div>

<div align="center" style="background-color:#FFA500">
<td> footer </td>
</div>

</div>

এর আউটপুট হলোঃ

header of webpage

main menu

side menu

HTML

CSS

java

Oracall

Main content of website.

footer menu

footer

বিঃ দ্রঃ ভালো লাগলে অবশ্যই শেয়ার করতে হবে।