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>

දැන් අපි හිස්පියුරාව (header) සමඟ කටයුතු කරමු. නිදර්ශකයේ දකින පරිදි, හිස්පියුරාවේ වෙබ් අඩවියේ නම සහ මෙනුවක් ඇත. මෙම බ්ලොක් දෙකම වම් අද්දර සිට සමාන දුරකින් පිහිටයි. එවැනි අවස්ථාවකදී, ඒවා එක් සමස්තයක් ලෙස ගෙන යාමෙන් පොදු මව් අංගයකින් ඒකාබද්ධ කිරීම තාර්කික ය:

<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>

දැන් අපි හිස්පියුරා බ්ලොක් වලට මෝස්තර (styles) ලියමු. මේ අතරතුර, හිස්පියුරාවේ උස නියම නොකරමු - එය එහි අන්තර්ගතයෙන් විහිදීමට ඉඩ දෙමු:

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 නිර්මාණය බාගත කරන්න. එය බ්‍රව්සරයකින් විවෘත කර එම නිදර්ශකය අනුව පිටුව නැවත සකසන්න.