HTML এবং CSS এ লেআউটে অনুশীলন

লেআউট তৈরি করে এবং সেগুলি কন্টেন্ট দিয়ে পূরণ করে অনুশীলন করা যাক। উদাহরণস্বরূপ, আসুন এমন একটি লেআউট তৈরি করি:

প্রথমে লেআউটের মৌলিক কাঠামো তৈরি করি:

<div class="wrapper">
	<header>
		...
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			...
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

এখন হেডার নিয়ে কাজ করা যাক। নমুনা থেকে দেখা যাচ্ছে হেডারে সাইটের নাম এবং একটি মেনু থাকবে। এছাড়াও এই ব্লকগুলি বাম প্রান্ত থেকে একই দূরত্বে অবস্থিত। এই ক্ষেত্রে, এগুলিকে একটি সাধারণ অভিভাবকের মধ্যে একত্রিত করা যৌক্তিক, এই ব্লকগুলিকে একটি সম্পূর্ণ হিসাবে নাড়াচাড়া করা:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename"></div>
			<nav></nav>
		</div>
	</header>
</div>

হেডার ব্লকগুলির কন্টেন্ট যোগ করা যাক:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
</div>

এখন হেডার ব্লকগুলির স্টাইল লিখি। এই ক্ষেত্রে, হেডারের উচ্চতা সেট করব না - এটি যেন এর কন্টেন্ট দ্বারা প্রসারিত হয়:

header {
	border: 1px solid black;
}
.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}

কন্টেইনারে তিনটি কলাম তৈরি করার কোড লিখি। এই ক্ষেত্রে, কন্টেন্টের উচ্চতা সেট করব না - এটি যেন এর কন্টেন্ট দ্বারা গঠিত হয়:

.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}

এখন আমাদের লেআউটের বাকি স্টাইলগুলি লিখি এবং আমাদের কাজের সমাধান পাই:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			<h1>Our blog</h1>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

* {
	box-sizing: border-box;
}

.wrapper {
	width: 1100px;
	margin: 30px auto;
	border: 1px solid black;
}
header {
	border: 1px solid black;
}
.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}
footer {
	padding: 30px 0;
	border: 1px solid black;
	text-align: center;
}

.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}
nav a {
	padding: 10px;
	color: blue;
	text-decoration: none;
	font: 15px Arial;
}
nav a:hover, nav a.active {
	color: red;
	text-decoration: underline;
}
main h1 {
	font: 20px "Times New Roman";
}
main p {
	margin: 10px 0;
	text-align: justify;
	font: 15px Arial;
}

ব্যবহারিক কাজ

নিম্নলিখিত লিঙ্ক থেকে 1.zip একটি লেআউট ডাউনলোড করুন। এটি ব্রাউজারে খুলুন এবং এই নমুনা অনুযায়ী পৃষ্ঠাটি পুনরায় তৈরি করুন।

নিম্নলিখিত লিঙ্ক থেকে 2.zip একটি লেআউট ডাউনলোড করুন। এটি ব্রাউজারে খুলুন এবং এই নমুনা অনুযায়ী পৃষ্ঠাটি পুনরায় তৈরি করুন।