এইচটিএমএল লেআউট টিউটোরিয়াল (HTML Layout Tutorial in Bangla)

 

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

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

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

1.<table bgcolor="black" border="1" heigh="200" width="300">

2.<tr><td>

3.<table bgcolor="white" heigh="100" width="100">

4.<tr><td>Tables inside tables!</td></tr>

5.</table>

6.</td></tr></table>

প্রদর্শন: টেবিলের ভিতর টেবিল

Tables inside tables!

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

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

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

01.<table cellspacing="1" cellpadding="0" border="0"

02.bgcolor="black" height="250" width="400">

03.<tr height="50"><td colspan="2" bgcolor="white">

04.<table title="Banner" id="banner" border="0">

05.<tr><td>Place a banner here</td></tr>

06.</table>

07.</td></tr>

08.<tr height="200"><td bgcolor="white">

09.<table title="Navigation" border="0">

10.<tr><td>Links!</td></tr>

11.<tr><td>Links!</td></tr>

12.<tr><td>Links!</td></tr>

13.</table>

14.</td><td bgcolor="white">

15.<table title="Content" id="content" border="0">

16.<tr><td>Content goes here</td></tr>

17.</table>

18.</td></tr></table>

প্রদর্শন:

view sourceprint?

01.<table title="Shell" height="250" width="400"

02.border="0" bgcolor="black" cellspacing="1" cellpadding="0">

03.<tr height="50"><td bgcolor="white">

04.<table title="banner" id="banner">

05.<tr><td>Banner goes here</td></tr>

06.</table>

07.</td></tr>

08.<tr height="25"><td bgcolor="white">

09.<table title="Navigation" id="navigation">

10.<tr><td>Links!</td>

11.<td>Links!</td>

12.<td>Links!</td></tr>

13.</table>

14.</td></tr>

15.<tr><td bgcolor="white">

16.<table title="Content" id="content">

17.<tr><td>Content goes here</td></tr>

18.</table>

19.</td></tr></table>