এইচটিএমএল লেআউট (HTML Layout)
এইচটিএমএল লেআউট
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: teal;
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;
color:black;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>সিটি গ্যালারী</h1>
</header>
<nav>
<ul>
<li><a href="#">ঢাকা</a></li>
<li><a href="#">চাঁদপুর</a></li>
<li><a href="#">রাজশাহী</a></li>
</ul>
</nav>
<article>
<h1>ঢাকা</h1>
<p>ঢাকা বাংলাদেশের রাজধানী এবং ঢাকা বিভাগের প্রধান শহর। ঢাকা একটি মেগাসিটি এবং দক্ষিণ এশিয়ার অন্যতম প্রধান শহরও বটে।</p>
<p>বুড়িগঙ্গা নদীর তীরে অবস্থিত এই শহর বাংলাদেশের বৃহত্তম শহর। ঢাকার মহানগর এলাকার জনসংখ্যা প্রায় ১ কোটি ৫০ লক্ষ।</p>
</article>
<footer>Copyright © sattacademy.com</footer>
</div>
</body>
</html>ফলাফল
এইচটিএমএল লেআউট এলিমেন্ট
প্রায়ই ওয়েবসাইটগুলো একাধিক কলামে কন্টেন্ট প্রদর্শন করে।
ওয়েবসাইটের বিভিন্ন অংশ তৈরি করার ক্ষেত্রে শব্দগত মিল রেখে এইচটিএমএল(৫) এ নতুন কিছু সিমেন্টিক এলিমেন্ট সংযোজন করা হয়েছেঃ
- <header> - ডকুমেন্ট বা সেকশনের হেডার তৈরি করার জন্য ব্যবহার করা হয়
- <nav> - নেভিগেশন লিঙ্ক তৈরি করার জন্য ব্যবহার করা হয়
- <section> - ডকুমেন্টে সেকশন তৈরি করার জন্য ব্যবহার করা হয়
- <article> - একটি আর্টিকেল তৈরি করার জন্য ব্যবহার করা হয়
- <aside> - কন্টেন্টকে কন্টেন্টের পাশে রাখতে ব্যবহার করা হয়
- <footer> - ডকুমেন্ট বা সেকশনের ফুটার তৈরি করার জন্য ব্যবহার করা হয়
- <details> - অতিরিক্ত তথ্য প্রদানের জন্য ব্যবহার করা হয়
- <summary> - <details> এলিমেন্টের হেডিং তৈরি করার জন্য ব্যবহার করা হয়
এইচটিএমএল লেআউট কৌশল
মাল্টিকলাম লেআউট তৈরির জন্য ৪ টা ভিন্ন পদ্ধতি রয়েছেঃ
- সিএসএস ফ্লোট(float) প্রোপার্টি
- সিএসএস ফ্রেমওয়ার্ক
- সিএসএস ফ্লেক্সবক্স(flexbox)
ব্যবহার
সিএসএস ফ্রেমওয়ার্ক
যদি আপনি মোবাইল-ফার্স্ট রেস্পন্সিভ লেআউট তৈরি করতে চান, তাহলে আপনি ফ্রেমওয়ার্ক ব্যবহার করতে পারেন। যেমনঃ বুটস্ট্রাপ।
সিএসএস ফ্লোট(float)
সিএসএস ফ্লোট(float) প্রোপার্টি ব্যবহার করে সম্পূর্ন ওয়েব লেআউট তৈরি করতে পারবেন। শুধু মনে রাখতে হবে float ও clear প্রোপার্টি কিভাবে কাজ করে।
ফ্লোটের উদাহরণ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: teal;
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;
color:black;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>সিটি গ্যালারী</h1>
</header>
<nav>
<ul>
<li><a href="#">ঢাকা</a></li>
<li><a href="#">চাঁদপুর</a></li>
<li><a href="#">রাজশাহী</a></li>
</ul>
</nav>
<article>
<h1>ঢাকা</h1>
<p>ঢাকা বাংলাদেশের রাজধানী এবং ঢাকা বিভাগের প্রধান শহর। ঢাকা একটি মেগাসিটি এবং দক্ষিণ এশিয়ার অন্যতম প্রধান শহরও বটে।</p>
<p>বুড়িগঙ্গা নদীর তীরে অবস্থিত এই শহর বাংলাদেশের বৃহত্তম শহর। ঢাকার মহানগর এলাকার জনসংখ্যা প্রায় ১ কোটি ৫০ লক্ষ।</p>
</article>
<footer>Copyright © sattacademy.com</footer>
</div>
</body>
</html>
ফলাফল