Huge Sell on Popular Electronics
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>
