একটা ওয়েব পেজের কাঠামো হল 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
উপরে টেবিল ব্যাবহার করে কিছু লেআউট দেখান হল।
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন