লেআউট



একটি ওয়েব পেজ সুন্দর করে ডিজাইন করার জন্য ওয়েব পেজ লেআউটের গুরত্ত অপরিসীম। ওয়েব পেজকে বিভিন্ন ভাগে বিভক্ত করে ডিজাইন করার পদ্ধতিই হল ওয়েব পেজ লেআউট। একটি সুন্দর ও আকর্ষণীয় ওয়েব পেজ ডিজাইন করার জন্য লেআউট সম্পর্কে ভালভাবে জানা থাকা অবশ্যই প্রয়োজন।


প্রকারভেদ

পত্রিকা, ম্যাগাজিনের মত অধিকাংশ ওয়েব সাইটই একাধিক সারি ও কলাম নিয়ে তৈরি করা হয়। আগে শুধুমাত্র এইচটিএমএল ব্যবহার করেই লেআউট করা হত কিন্তু বর্তমানে এইচটিএমএল এর সাথে সিএসএসও ব্যবহার করা হয়।

২ ভাবে ওয়েব সাইটের লেআউট তৈরি করা যায় ,
১/ টেবিল ব্যবহার করে(<table>...</table>)
এবং ২/ ডিভ ব্যবহার করে।


টেবিল ব্যবহার করে

লেআউট তৈরি করার সব থেকে সহজ পদ্ধতি হল টেবিল ট্যাগ অর্থাৎ <table> ব্যবহার করা। টেবিল ব্যবহার করে ৩ টি সারি এবং ২ টি কলামের একটি উদাহরন নীচে দেখুন -

উদাহরণ দেখুন

<html
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br/>
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2016 websschool.com</td>
</tr>
</table>
</body>
</html>


ওপরের এইচটিএমএল কোড গুলোর জন্য নীচের মত একটি ওয়েব লেআউট তৈরি হবে।

নোট - যদিও টেবিল ট্যাগ ব্যবহার করে সুন্দর ওয়েব লেআউট তৈরি করা যায় তারপরেও লেআউট তৈরি করার জন্য টেবিল ট্যাগ ব্যবহার করা হয় না। লেআউট তৈরি করার জন্য ডিভ ট্যাগ ব্যবহার করাই উত্তম ।


ডিভ ব্যবহার করে

এইচটিএমএল এর ডিভ এলিমেনট হল একটি ব্লক লেভেল এলিমেনট। ৫ টি ডিভ এলিমেনট ব্যবহার করে ৩ টি সারি ও ২ টি কলাম তৈরি করে একটি ওয়েব পেজ লেআউট করা হয়েছে, নীচে একটি উদাহরন দেখুন -

উদাহরণ দেখুন

<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b>
HTML
CSS
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2017 websschool.com
</div>
</div>
</body>
</html>


ওপরের এইচটিএমএল কোড গুলোর জন্য নীচের মত একটি ওয়েব লেআউট তৈরি হবে।

নোট - ওয়েব পেজের লেআউট তৈরি করতে ডিভ ব্যবহার করাই উত্তম।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.