HTML Layouts একটি HTML ওয়েব পেজে কম্পোনেন্টগুলোর অরেঞ্জমেন্ট স্পেসিফাই করে। অনেক HTML সেমান্টিক এলিমেন্ট আছে যা একটি ওয়েব পেজের বিভিন্ন সেকশন ডিফাইন করে।
HTML লেআউটের জন্য ব্যবহৃত সেমান্টিক HTML এলিমেন্টগুলো নিচে দেওয়া হলো:
| ট্যাগ | ব্যাখ্যা |
|---|---|
| header | এটি একটি সেকশন বা ডকুমেন্টের জন্য হেডার স্পেসিফাই করে। |
| section | এটি একটি ডকুমেন্টে একটি সেকশন রিপ্রেজেন্ট করে। |
| nav | এটি নেভিগেশন লিংকগুলোর জন্য একটি কন্টেইনার স্পেসিফাই করে। |
| article | এটি একটি স্বাধীন সেলফ-কন্টেইনিং আর্টিকেল স্পেসিফাই করে। |
| aside | এটি মূল কন্টেন্ট ছাড়া কন্টেন্টের জন্য একটি ট্যাগ স্পেসিফাই করে (যেমন সাইডবার)। |
| footer | এটি একটি সেকশন বা ডকুমেন্টের জন্য ফুটার স্পেসিফাই করে। |
| details | এটি অতিরিক্ত ডিটেইলসের জন্য একটি ট্যাগ স্পেসিফাই করে। |
| summary | এটি <details> এলিমেন্টের জন্য একটি হেডার স্পেসিফাই করে। |
HTML ওয়েব পেজ লেআউটের জন্য ব্যবহৃত টেকনিকগুলো:
- CSS float প্রপার্টি
- CSS flexbox
- CSS ফ্রেমওয়ার্ক
- CSS grid
- HTML tables
উদাহরণ
HTML Layouts-এর একটি উদাহরণ দেখা যাক:
<!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 ডেমো</h1> <header>এটি হেডার</header> <section> <nav> <ul> <li><a href="#">হোম</a></li> <li><a href="#">আমাদের সম্পর্কে</a></li> <li><a href="#">যোগাযোগ</a></li> </ul> </nav> <article>এটি একটি আর্টিকেল এলিমেন্ট।</article> </section> <footer>এটি ফুটার</footer> </body> </html>আউটপুট
