এইচটিএমএল লেআউট - HTML Leyout


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


এইচটিএমএল লেআউট এলিমেন্ট

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

ওয়েবসাইটের বিভিন্ন অংশ তৈরি করার ক্ষেত্রে এর সাথে শব্দগত মিল রেখে এইচটিএমএল ৫.০ তে নতুন কিছু সিমেন্টিক এলিমেন্ট সংযোজন করা হয়েছে। এগুলো হল নিম্নরূপ -


এইচটিএমএল লেআউট পদ্ধতি

একাধিক কলাম ব্যবহার করে ওয়েব পেজের লেআউট তৈরির জন্য ৪ টা ভিন্ন পদ্ধতি রয়েছে, এগুলো হল নিম্নরূপ -


এইচটিএমএল টেবিল

লেআউট তৈরি করার সব থেকে সহজ পদ্ধতি হল টেবিল ট্যাগ অর্থাৎ <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 website layout example

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

নোট - এইচটিএমএল টেবিল সম্পর্কে আরও জানতে আমাদের এইচটিএমএল টেবিল অধ্যায়টি দেখুন।


সিএসএস ফ্লোট বা float প্রোপার্টি

সিএসএস ফ্লোট প্রপার্টি ব্যবহার করে ওয়েব পেজের লেআউট করা উচিত। কারন এটা সহজেই সেখা যায় - শুধু ফ্লোট বা float এবং clear এই প্রপার্টি গুলো ব্যাবহার করে একটি ভাল লেআউট তৈরি করতে পারবে। এক্ষেত্রে মনে রাখতে হবে ফ্লোটিং এলিমেন্ট এইচটিএমএল ডকুমেন্টের সহজ flow বা প্রবাহে প্রতিবন্ধকতা তৈরি করে, যা ওয়েব সাইটের নমনীয়তা বা flexibility নষ্ট করে।

নোট - সিএসএস ফ্লোট বা float প্রোপার্টি সম্পর্কে আরও জানতে আমাদের সিএসএস ফ্লোট বা float অধ্যায় ব্রাউজ করুন।


সিএসএস ফ্লেক্সবক্স বা flexbox

ফ্লেক্সবক্স CSS3 এর একটি নতুন লেআউট পদ্ধতি। Flexbox ব্যবহার করে ওয়েব পেজের লেআউটটি ডিজাইন করলে, ওয়েব পেজ পূর্বনির্ধারিত নিয়ম অনুসরন করেই বিভিন্ন আকারের স্ক্রীনে বিভিন্ন লেআউট প্রদর্শন করে। অর্থাৎ বিভিন্ন আকারের স্ক্রীনের বিভিন্ন ডিভাইসে, ফ্লেক্সবক্স ব্যবহার করে তৈরি করা ওয়েব পেজগুলো খুব সুন্দর ভাবে প্রদর্শিত হতে পারে।

নোট - ফ্লেক্সবক্স এর সব থেকে বড় অসুবিধা হল যে এটা IE10 এবং এর আগের ভার্সনগুলো কাজ করে না।

নোট - ফ্লেক্সবক্স সম্পর্কে আরও জানতে আমাদের সিএসএস ফ্লেক্সবক্স অধ্যায় টি ব্রাউজ করুন।


সিএসএস ফ্রেমওয়ার্ক

যদি মোবাইল-ফার্স্ট রেস্পন্সিভ ওয়েব সাইট লেআউট তৈরি করতে হয়, তবে কোন সিএসএস ফ্রেমওয়ার্ক ব্যবহার করা যেতে পারে। বেশ কিছু ফ্রী সিএসএস ফ্রেমওয়ার্ক রয়েছে, যেমন - বুটস্ট্রাপ, w3css ইত্যাদি।

নোট - বুটস্ট্রাপ ফ্রেমওয়ার্ক ডাউনলোড করতে বুটস্ট্রাপ ওয়েবসাইট ব্রাউজ করুন।

নোট - w3css ফ্রেমওয়ার্ক ডাউনলোড করতে w3css ওয়েবসাইট ব্রাউজ করুন।