Md. Mursedul Islam Sumon
Web Designer
এইচটিএমএল লেআউট (HTML Layouts)
বিভিন্ন ওয়েবসাইটে অনেক সময়ই লক্ষ্য করা যায় যে লিখাগুলো কয়েকটি কলামে বিভক্ত করা থাকে। যেমন, ম্যাগাজিন, নিউজপেপার ইত্যাদি।
HTML এ <div> tag এর ব্যবহার করে layout design বা কলামে বিভক্ত করা যায়।
div element ব্যবহার করে প্রায় layout করা হয়, কারন div ব্যবহার করলে একে সহজেই CSS দিয়ে এর অবস্থান ও সবকিছু design করে নেয়া যায়।
নিচের উদাহরণটিতে চারটি div ব্যবহার করে কয়েকটি কলাম তৈরি করা হল-
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<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>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
উপরোক্ত html এর CSS part টুকু নিম্নরুপ
<style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style>
ফলাফলঃ
HTML5 ব্যবহার করে ওয়েবসাইট বিন্যাস
HTML5 দিয়ে খুব সুন্দরভাবে ও সহজেই একটা website এর layout তৈরি করা যায়।
HTML5 এর কিছু নতুন Tag ব্যবহার করে সহজেই website এর বিভিন্ন part আলাদা করা যায়।
| header = এই tag ব্যবহার করে website এর header section কে বুঝানো হয়। |
| nav = এই tag ব্যবহার করে মেনুর আইটেমগুলোর link করা হয়। |
| section = এই tag ব্যবহার করে কোন document এর section বুঝানো হয়। |
| article = এই tag দিয়ে একটি article বুঝানো হয়। |
| aside = এই tag দিয়ে পেজ এর sidebar বুঝানো হয়। |
| footer = এই tag দিয়ে পেজ এর সর্বনিম্ন অংশ বা footer part বুঝানো হয়। |
নিচের উদাহরনে <header>, <nav>, <section>, এবং <footer> ব্যবহার করে layout তৈরি করা দেখানো হল-
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<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>
</section>
<footer>
Copyright © W3Schools.com
</footer>
</body>
উপরোক্ত html এর CSS নিম্নে দেয়া হল-
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
টেবিল ব্যবহার করে HTML বিন্যাস
Table tag ব্যবহার করে html layout তৈরি করা যায়।
<body> <table class="lamp"> <tr> <th> <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"> </th> <td> The table element was not designed to be a layout tool. </td> </tr> </table> </body>
উপরোক্ত html এর CSS নিম্নে দেয়া হল-
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>
