menubar

HTML Layouts

একটা ওয়েব পেজের কাঠামো হল layout।ওয়েব পেজ কতটা সুন্দর হবে সেটা layout এর উপর নির্ভর করে। আগে এইচটিএমএল এর table  ব্যাবহার করে layout বানানো হতো। table  এর সাথে সিএসএস ব্যাবহার করে সুন্দর layout তৈরি করা যায়।তবে এখন আর table  ব্যাবহার করা হয় না।এখন div ব্যাবহার করে অতি সহজে layout ব্যাবহার করা যায়।
টেবিল এর চেয়ে  div ব্যাবহার করা অনেক সহজ।আমি বলবো div ব্যাবহার করে layout করার জন্য।তবে এখানে আপনাদের ধারনা দেবার জন্য টেবিল দিয়ে কিভাবে layout ব্যাবহার করবেন সেটা দেখিয়ে দিব।

প্রথমঃ
<html>
<head>
<title> www.bdtutorialweb.blogspot.com</title>
</head>
<body bgcolor="gray">
<table width="400" border="0">
<tr>
<td colspan="3" style="background-color: #0B5FA5;">
<h1> Web Page header</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color: #3F8FD2;width:100px;text-align:top;">
<p><b>Side bar</b><br />
<a href="#">PHP</a>
<br />
<a href="#">HTML</a>
<br />
<a href="#">CSS</a>
<a href="#">Wordpress</a>
</p></td>
<td style="background-color:#25547B;height:200px;width:400px;text-align:top;"><h2 style="color:#900">This is heading.</h2>
<p style="color: #006">This is a paragraph.This is a paragraph. This is a paragraph.<br />
This is a paragraph.This is a paragraph. This is a paragraph.<br />
This is a paragraph.This is a paragraph.This is a paragraph.<br />
This is a paragraph.This is a paragraph.This is a paragraph.</p></td>
</tr>
<tr>
<td colspan="2" style="background-color:#000000;text-align:center;color:fff;">
Copyright © 2015bdtutorialweb</td>
</tr>
</table>
</body>
</html>






দ্বিতীয়ঃ

 <!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width="100%" border="0">
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <h1>This is Web Page Main title</h1>
    </td>
  </tr>
  <tr valign="top">
    <td bgcolor="#aaa" width="50">
      <b>Main Menu</b><br />
      HTML<br />
      CSS<br />
      Javascript
    </td>
    <td bgcolor="#eee" width="100" height="200">
        Web Design Tutorial
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <center>
      Copyright © 2015 bdtutorialweb
      </center>
    </td>
  </tr>
</table>
</body>
</html>




তৃতীয়ঃ

 <!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width="100%" border="0">
  <tr valign="top">
    <td bgcolor="#E93A90" width="20%">
      <b>Main Menu</b><br />
      HTML<br />
      CSS<br />
    
    </td>
    <td bgcolor="#D30068" height="200" width="60%">
        Web Design Tutorial
    </td>
    <td bgcolor="#9E2862" width="20%">
      <b>Right Menu</b><br />
      HTML<br />
      CSS<br />
    
    </td>
   </tr>
<table>
</body>
</html


উপরে টেবিল ব্যাবহার করে কিছু লেআউট দেখান হল।

কোন মন্তব্য নেই:

একটি মন্তব্য পোস্ট করুন