এইচটিএমএল লেআউটগুলি একটি এইচটিএমএল ওয়েব পৃষ্ঠায় উপাদানগুলির বিন্যাস নির্দিষ্ট করে৷ অনেক HTML শব্দার্থিক উপাদান রয়েছে যা একটি ওয়েব পৃষ্ঠার বিভিন্ন বিভাগকে সংজ্ঞায়িত করে।
HTML লেআউটের জন্য ব্যবহৃত শব্দার্থিক HTML উপাদানগুলি নিম্নরূপ:
| ট্যাগ | ব্যাখ্যা |
|---|---|
| হেডার | এটি একটি বিভাগ বা একটি নথির জন্য একটি শিরোনাম নির্দিষ্ট করে৷ | ৷
| বিভাগ | এটি একটি নথিতে একটি বিভাগ উপস্থাপন করে৷ | ৷
| nav | এটি নেভিগেশন লিঙ্কগুলির জন্য একটি ধারক নির্দিষ্ট করে৷ | ৷
| নিবন্ধ | এটি একটি স্বাধীন স্বয়ংসম্পূর্ণ নিবন্ধ নির্দিষ্ট করে৷ | ৷
| একপাশে | এটি প্রধান বিষয়বস্তু (যেমন একটি সাইডবারের মতো) বাদ দিয়ে সামগ্রীর জন্য একটি ট্যাগ নির্দিষ্ট করে৷ |
| ফুটার | এটি একটি বিভাগ বা একটি নথির জন্য একটি ফুটার নির্দিষ্ট করে৷ | ৷
| বিশদ বিবরণ | এটি অতিরিক্ত বিবরণের জন্য একটি ট্যাগ নির্দিষ্ট করে৷ | ৷
| সারাংশ | এটি <বিস্তারিত> উপাদানের জন্য একটি হেডার নির্দিষ্ট করে। |
এইচটিএমএল ওয়েব পেজ লেআউটের জন্য ব্যবহৃত কৌশল:
- সিএসএস ফ্লোট সম্পত্তি
- সিএসএস ফ্লেক্সবক্স
- সিএসএস ফ্রেমওয়ার্ক
- সিএসএস গ্রিড
- HTML টেবিল
উদাহরণ
আসুন HTML লেআউটের একটি উদাহরণ দেখি:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
color: #000;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
header {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
nav {
float: left;
width: 20%;
height: 200px;
background: #282828;
padding: 60px 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
article {
float: left;
padding: 80px 10px;
width: 80%;
background-color: #fff;
height: 200px;
text-align: center;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
</style>
<body>
<h1>HTML Layouts Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html> আউটপুট
