এইচটিএমএল বাংলা টিউটোরিয়াল পর্ব ১৭ – লেআউট টিউটোরিয়াল (HTML Layout Tutorial in Bangla)

এইচটিএমএল লেআউট হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে এইচটিএমএল

লেআউট তৈরী করা হয়।

** বর্তমানে লেআউট ডিভ (div এলিমেন্ট) ব্যবহার করে বানানো হয়। টেবিল দিয়ে কখনই লেআউট বানাবেন না। টিউটোরিয়ালটি দেয়া আছে তাই মোছা হলনা। টেবিল দিয়েও যে লেআউট বানানো যায় এবং আগে সব লেআউট এভাবেই বানানো হত এটা জানার জন্যই শুধু টিউটোরিয়ালটি।

এইচটিএমএল বাংলা টিউটোরিয়াল পর্ব ১৭ - লেআউট টিউটোরিয়াল (HTML Layout Tutorial in Bangla)

<table bgcolor="black" border="1" heigh="200" width="300">
<tr><td>
<table bgcolor="white" heigh="100" width="100">
<tr><td>Tables inside tables!</td></tr>
</table>
</td></tr></table>

কোডটি কেমন হবে তা দেখার জন্য এখানে ক্লিক করুন: টেবিলের ভিতর টেবিল

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

Standard layout সাধারনত উপরে অবস্থিত ব্যানার, নেভিগেশন এবং content বা প্রদর্শন বক্স। এগুলো হলো

ভাল ওয়েব সাইট এর বৈশিষ্ট্য।

<table cellspacing="1" cellpadding="0" border="0"
bgcolor="black" height="250" width="400">
<tr height="50"><td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td></tr>
<tr height="200"><td bgcolor="white">
<table title="Navigation" border="0">
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
</table>
</td><td bgcolor="white">
<table title="Content" id="content" border="0">
<tr><td>Content goes here</td></tr>
</table>
</td></tr></table>

কোডটি কেমন হবে তা দেখার জন্য এখানে ক্লিক করুন

 

<table title="Shell" height="250" width="400"
border="0" bgcolor="black" cellspacing="1" cellpadding="0">
<tr height="50"><td bgcolor="white">
<table title="banner" id="banner">
<tr><td>Banner goes here</td></tr>
</table>
</td></tr>
<tr height="25"><td bgcolor="white">
<table title="Navigation" id="navigation">
<tr><td>Links!</td>
<td>Links!</td>
<td>Links!</td></tr>
</table>
</td></tr>
<tr><td bgcolor="white">
<table title="Content" id="content">
<tr><td>Content goes here</td></tr>
</table>
</td></tr></table>

কোডটি কেমন হবে তা দেখার জন্য এখানে ক্লিক করুন

 

Leave a Reply