X

X

X

HTML Layouts (লেআউট) : ওয়েবপেজের পেজ বিন্যাস।


Code Example

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>

<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>

<footer>Copyright &copy; www.seicoder.com</footer>

</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Layout ইলামেন্ট

সাধারণত ওয়েবসাইটসমূহ একাধিক কলামে কন্টেন্ট উপস্থাপণ করে থাকে। যেমন, ধরুন একটি পত্রিকার কথা। পত্রিকায় যেমন একাধিক কলামে সংবাদ উপস্থাপন করা হয়, ওয়েবসাইটেও কন্টেন্ট উপস্থাপণের জন্য একাধিক কলাম ব্যবহার করা হয়।

HTML5 এ একটি ওয়েবপেজের বিভিন্ন অংশ সঠিকভাবে উপস্থাপণ করার জন্য অনেক ইলামেন্ট রয়েছে। এগুলো Semantic ইলামেন্ট বা অর্থবহ ইলামেন্ট নামে পরিচিত।

HTML5 Semantic Elements
  • <header> – ওয়েব পেজের হেডার অংশ বর্ণনা করে।
  • <nav> – ওয়েব পেজের নেভিগেশন অংশ বর্ণনা করে।
  • <section> – ওয়েব পেজের একটি সেকশন বর্ণনা করে।
  • <article> – ওয়েব পেজের আর্টিকেল অংশকে বর্ণনা করে।
  • <aside> – মূল কন্টেন্ট থেকে তার পাশের কন্টেন্ট প্রকাশ করার জন্য ব্যবহৃত হয়।
  • <footer> – ওয়েব পেজের ফুটার অংশ বর্ণনা করে।
  • <details> – বিস্তারিত তথ্য বর্ণনা করার জন্য ব্যবহৃত হয়।
  • <summary> – <details> ইলামেন্ট এর জন্য সারংশ বর্ণনা করে।

কথা হচ্ছে সিমানটিক ইলামেন্টগুলো আমরা কেন ব্যবহার করবো?

বর্তমান ইন্টারনেট দুনিয়ায় কোটি কোটি ওয়েবসাইট রয়েছে। এই বিপুল সংখ্যক ওয়েবসাইটের মধ্যে আপনি নতুন একটি ওয়েবসাইট তৈরি করলেন। কিন্তু কেউ আপনার ওয়েবসাইট খুজে পেলো না! তাহলে কি আপনার এত কষ্ট করে ওয়েবসাইট বানানোর কোনা সার্থকতা থাকলো?
আপনার ওয়েবসাইট মানুষের সামনে খুজে নিয়ে আসে সার্চ ইঞ্জিন। সার্চ ইঞ্জিন যেন আপনার কন্টেন্ট ভালোভাবে বুঝতে পারে এবং মানুষের অনুসন্ধানের সাথে সামঞ্জস্যপূর্ণ তথ্য উপস্থাপণ করতে পারে সেজন্য আপনাকে সিমান্টিক বা অর্থবহ ইলামেন্ট ব্যবহার করতে হবে।


HTML Layout টেকনিক

সুন্দর এবং সামঞ্জস্যপূর্ণভাবে ওয়েবসাইটের কন্টেন্ট উপস্থাপণের জন্য বেশ কয়েকটি পদ্ধতি রয়েছে। তার মধ্যে নিচে খুব বহুল প্রচলিত কয়েকটি পদ্ধতির নাম উল্লেখ্য করা হলো।

  • HTML টেবিলের মাধ্যমে
  • CSS float প্রোপার্টির মাধ্যমে
  • CSS ফ্রেমওয়ার্ক ব্যবহার করে
  • CSS ফ্লেক্সবক্স ব্যবহার করে।

এই এতোগুলো পদ্ধতির মধ্যে কোনটি আপনি বেছে নিবেন?

HTML টেবিল

HTML টেবিল কোনো Layout টুল নয়। বরং টেবুলার ডাটা উপস্থাপন করার জন্যই এটি তৈরি করা হয়েছিলো। সুতরাং কখনই আপনার পেজের লেআউট তৈরি করার জন্য টেবিলেক লেআউট হিসেবে ব্যবহার করবেন না। এটি নিয়ন্ত্রণ করা খুব কঠিন হয়ে যাবে। তাছাড়া রেসপনসিভ ওয়েব ডিজাইন করার জন্য টেবিল একেবারে অনুপোযোগী।

টিপস: পেজ লেআউট তৈরি করার জন্য টেবিল ব্যবহার করবেন না।

CSS ফ্রেমওয়ার

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

নিচের টিউটোরিয়ালসমূহ এক্ষেত্রে ব্যবহার করতে পারেন।
W3.CSS or Bootstrap.


CSS ফ্লোট প্রোপার্টি

শুধুমাত্র CSS ফ্লোট প্রোপার্টি ব্যবহার করে যেকোনো ধরণের ওয়েব পেজের লেআউট খুব সহজে তৈরি করা যায়। খুব সহজে এর কার্যপদ্ধতি সম্পর্কে জানা যায়।

Code Example

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>

<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>

<footer>Copyright &copy; www.seicoder.com</footer>

</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS ফ্লেক্সবক্স

CSS3 এ ফ্লেক্সবক্স একটি নতুন সংযোজন । এটিও বেশি কার্যকরী।

Code Example

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}

.flex-container > * {
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

.article {
    text-align: left;
}

header {background: black;color:white;}
footer {background: #aaa;color:white;}
.nav {background:#eee;}

.nav ul {
    list-style-type: none;
    padding: 0;
}
.nav ul a {
    text-decoration: none;
}

@media all and (min-width: 768px) {
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
    footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>

<div class="flex-container">
<header>
  <h1>City Gallery</h1>
</header>

<nav class="nav">
<ul>
  <li><a href="#">London</a></li>
  <li><a href="#">Paris</a></li>
  <li><a href="#">Tokyo</a></li>
</ul>
</nav>

<article class="article">
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia,
  its history going back to its founding by the Romans, who named it Londinium.</p>
  <p><strong>Resize this page to see what happens!</strong></p>
</article>

<footer>Copyright &copy; www.seicoder.com</footer>
</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।