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



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


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

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

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

<header> - ডকুমেন্ট বা সেকশনের হেডার তৈরি করার জন্য ব্যবহার করা হয়,
<nav> - নেভিগেশন লিঙ্ক তৈরি করার জন্য ব্যবহার করা হয়,
<section> - ডকুমেন্টে সেকশন তৈরি করার জন্য ব্যবহার করা হয়,
<article> - একটি আর্টিকেল তৈরি করার জন্য ব্যবহার করা হয়,
<aside> - কন্টেন্টকে কন্টেন্টের পাশে রাখতে ব্যবহার করা হয়,
<footer> - ডকুমেন্ট বা সেকশনের ফুটার তৈরি করার জন্য ব্যবহার করা হয়,
<details> - অতিরিক্ত তথ্য প্রদানের জন্য ব্যবহার করা হয়,
<summary> - <details> এলিমেন্টের হেডিং তৈরি করার জন্য ব্যবহার করা হয়।


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

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

এইচটিএমএল টেবিল ব্যবহার করে,
সিএসএস ফ্লোট বা float প্রোপার্টি ব্যবহার করে,
সিএসএস ফ্লেক্সবক্স বা flexbox ব্যবহার করে,
সিএসএস ফ্রেমওয়ার্ক ব্যবহার করে,


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

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


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

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

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


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

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

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


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

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

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

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


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

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

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

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







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

Report or suggest about this page

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