এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
লগইন
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল লেআউট (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>

ফলাফল




এইচটিএমএল লেআউট এলিমেন্ট

প্রায়ই ওয়েবসাইটগুলো একাধিক কলামে কন্টেন্ট প্রদর্শন করে।

ওয়েবসাইটের বিভিন্ন অংশ তৈরি করার ক্ষেত্রে শব্দগত মিল রেখে এইচটিএমএল(৫) এ নতুন কিছু সিমেন্টিক এলিমেন্ট সংযোজন করা হয়েছেঃ

HTML5 Semantic Elements
  • <header> - ডকুমেন্ট বা সেকশনের হেডার তৈরি করার জন্য ব্যবহার করা হয়
  • <nav> - নেভিগেশন লিঙ্ক তৈরি করার জন্য ব্যবহার করা হয়
  • <section> - ডকুমেন্টে সেকশন তৈরি করার জন্য ব্যবহার করা হয়
  • <article> - একটি আর্টিকেল তৈরি করার জন্য ব্যবহার করা হয়
  • <aside> - কন্টেন্টকে কন্টেন্টের পাশে রাখতে ব্যবহার করা হয়
  • <footer> - ডকুমেন্ট বা সেকশনের ফুটার তৈরি করার জন্য ব্যবহার করা হয়
  • <details> - অতিরিক্ত তথ্য প্রদানের জন্য ব্যবহার করা হয়
  • <summary> - <details> এলিমেন্টের হেডিং তৈরি করার জন্য ব্যবহার করা হয়

এইচটিএমএল লেআউট কৌশল

মাল্টিকলাম লেআউট তৈরির জন্য ৪ টা ভিন্ন পদ্ধতি রয়েছেঃ


ব্যবহার

সিএসএস ফ্রেমওয়ার্ক

যদি আপনি মোবাইল-ফার্স্ট রেস্পন্সিভ লেআউট তৈরি করতে চান, তাহলে আপনি ফ্রেমওয়ার্ক ব্যবহার করতে পারেন। যেমনঃ বুটস্ট্রাপ


সিএসএস ফ্লোট(float)

সিএসএস ফ্লোট(float) প্রোপার্টি ব্যবহার করে সম্পূর্ন ওয়েব লেআউট তৈরি করতে পারবেন। শুধু মনে রাখতে হবে floatclear প্রোপার্টি কিভাবে কাজ করে।

ফ্লোটের উদাহরণ

উদাহরণ

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

ফলাফল