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

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

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

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

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

এইচটিএমএল৫

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

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

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

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

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

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

রেফারেন্স- reference

 

এইচটিএমএল লিস্ট


এক নজরে এইচটিএমএল লিস্ট সংক্রান্ত ট্যাগসমূহ

ট্যাগ বর্ণনা
<ul> আন-অর্ডার লিস্ট তৈরি করার জন্য ব্যবহার করা হয়।
<ol> অর্ডার লিস্ট তৈরি করার জন্য ব্যবহার করা হয়।
<li> আন-অর্ডার এবং অর্ডার লিস্টের লিস্ট আইটেম তৈরি করার জন্য ব্যবহার করা হয়।
<dl> ডেস্ক্রিপশন লিস্ট তৈরি করার জন্য ব্যবহার করা হয়।
<dt> ডেস্ক্রিপশন লিস্টের মধ্যে যেই আইটেমটি বর্ণনা করা হবে সেটিকে নির্দেশ করে।
<dd> ডেস্ক্রিপশন লিস্টের কোন একটি আইটেম বর্ণনা করার জন্য ব্যবহার করা হয়।

এইচটিএমএল আন-অর্ডার লিস্ট

আন-অর্ডার লিস্ট তৈরি করার জন্য <ul> ট্যাগ এবং আনঅর্ডার লিস্টের লিস্ট আইটেম তৈরি করার জন্য <li> ট্যাগ ব্যবহার করা হয়।

আন-অর্ডার লিস্টের লিস্ট আইটেমগুলো ডিফল্টভাবে বুলেট চিহ্ন(ছোট কালো বৃত্ত) দ্বারা চিহ্নিত হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল আন-অর্ডার লিস্ট</title>
</head>
<body>
	<h4>একটি আনঅর্ডার লিস্ট</h4>
	<ul>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল


আন-অর্ডার লিস্টে ব্যবহৃত চিহ্ন

আন-অর্ডার লিস্টে বিভিন্ন ধরনের চিহ্ন যুক্ত করার জন্য সিএসএস list-style-type প্রোপার্টি ব্যবহার করা হয়।

বুলেট

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল আন-অর্ডার লিস্ট</title>
</head>
<body>
	<h4>ডিস্ক বুলেট চিহ্নসহ আনঅর্ডার লিস্ট</h4>
	<ul style="list-style-type:disc">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল

সার্কেল

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল আন-অর্ডার লিস্ট</title>
</head>
<body>
	<h4>সার্কেল বুলেট চিহ্নসহ আনঅর্ডার লিস্ট</h4>
	<ul style="list-style-type:circle">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল

বর্গক্ষেত্র

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল আন-অর্ডার লিস্ট</title>
</head>
<body>
	<h4>বর্গক্ষেত্রের ন্যায় বুলেট চিহ্নসহ আনঅর্ডার লিস্ট</h4>
	<ul style="list-style-type:square">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল

স্টাইলবিহীন

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>কোন প্রকার বুলেট চিহ্ন ব্যতীত আনঅর্ডার লিস্ট</h4>
	<ul style="list-style-type:none">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল


এইচটিএমএল অর্ডার লিস্ট

অর্ডার লিস্ট তৈরি করার জন্য <ol> ট্যাগ এবং অর্ডার লিস্টের লিস্ট আইটেমগুলো তৈরি করার জন্য <li> ট্যাগ ব্যবহার করা হয়।

লিস্ট আইটেমগুলো ডিফল্টভাবে সংখ্যা দ্বারা চিহ্নিত হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>এইচটিএমএল অর্ডার লিস্ট</h4>
	<ol>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল


অর্ডার লিস্টকে চিহ্নিত করার বিভিন্ন ধরণসমূহ

<ol> ট্যাগের type এট্রিবিউট দ্বারা লিস্ট আইটেমকে চিহ্নিত করার ধরণসমূহ নির্দিষ্ট করা হয়।

সংখ্যা

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>সংখ্যাযুক্ত অর্ডার লিস্ট</h4>
	<ol type="1">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল

বড় হাতের ইংরেজি অক্ষর

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>বড় হাতের ইংরেজি অক্ষরযুক্ত অর্ডার লিস্ট</h4>
	<ol type="A">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল

ছোট হাতের ইংরেজি অক্ষর

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>ছোট হাতের ইংরেজি অক্ষরযুক্ত অর্ডার লিস্ট</h4>
	<ol type="a">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল


বড় হাতের রোমান সংখ্যা

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>বড় হাতের রোমান সংখ্যা দিয়ে অর্ডার লিস্ট</h4>
	<ol type="I">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল


ছোট হাতের রোমান সংখ্যাঃ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>ছোট হাতের রোমান সংখ্যা দিয়ে অর্ডার লিস্ট</h4>
	<ol type="i">
		<li>Coffee</li>
		<li>Teaa</li>
		<li>old-Drinks</li>
	</ol>
</body>
</html>

ফলাফল



এইচটিএমএল ডেস্ক্রিপশন লিস্ট

ডেস্ক্রিপশন লিস্ট(Description Lists) হলো এমন লিস্ট যার প্রতিটি আইটেমের বর্ণনা দেয়া থাকে।

<dl> ট্যাগের মাধ্যমে ডেস্ক্রিপশন লিস্ট তৈরি করা হয়। <dt> ট্যাগের মাধ্যমে লিস্ট আইটেমকে নির্দিষ্ট করা হয় এবং <dd> ট্যাগের মাধ্যমে ডেস্ক্রিপশন লিস্টের প্রতিটি আইটেমের বর্ণনা দেয়া হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>একটি লিস্টের বর্ণনা</h4>
	<dl>
		<dt>Coffe</dt>
			<dd> - black hot drink</dd>
		<dt>Milk</dt>
			<dd> - white cold drink</dd>
	</dl>
</body>
</html>

ফলাফল




নেস্টেড(Nested) এইচটিএমএল লিস্ট

এইচটিএমএল লিস্টের মধ্যে পূনরায় লিস্ট ব্যবহার করা যায়। অর্থাৎ একটি লিস্ট আইটেমের জায়গায় আমরা পুরো একটি লিস্ট ব্যবহার করতে পারি। নিচের উদাহরণে বিষয়টি দেখানো হলো।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

	<h4>একটি নেস্টেড লিস্ট</h4>
	<ul>
		<li>Coffee</li>
		<li>Tea
			<ul>
				<li>Black Tea</li>
				<li>Green Tea</li>
			</ul>
		</li>
		<li>Cold-Drinks</li>
	</ul>

</body>
</html>

ফলাফল


Note একটি লিস্টের মধ্যে যেকোন এইচটিএমএল এলিমেন্ট রাখা যেতে পারে। যেমন- নতুন লিস্ট, ইমেজ, লিংক ইত্যাদি।

আনুভূমিক(Horizontal) লিস্ট

এইচটিএমএল লিস্টকে সিএসএস এর মাধ্যমে বিভিন্নভাবে স্টাইল করা যায়।

ওয়েবপেজের জন্য মেনু তৈরি করার ক্ষেত্রে আনুভূমিক লিস্টের ব্যবহার একটি জনপ্রিয় পদ্ধতি।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
	<style>
	ul#menu li {
		display:inline;
	}
	</style>
</head>
<body>
	<h4>আনুভূমিক লিস্ট</h4>
	<ul id="menu">
		<li>এইচটিএমএল</li>
		<li>সিএসএস</li>
		<li>জাভাস্ক্রিপ্ট </li>
		<li>পিএইচপি</li>
	</ul>
</body>
</html>

ফলাফল


মেনু তৈরি করার উদাহরনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
	<style>
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #CC9999;
	}
	li {
		float: left;
	}
	li a {
		display: block;
		color: white;
		text-align: center;
		padding: 16px;
		text-decoration: none;
	}
	li a:hover {
		background-color: #111111;
	}
	</style>
</head>
<body>
	<h4>মেনু তৈরি</h4>
	<ul>
		<li><a class="active" href="#home">হোম</a></li>
		<li><a href="#news">নিউজ</a></li>
		<li><a href="#contact">বিনোদন</a></li>
		<li><a href="#about">খেলা</a></li>
	</ul>
</body>
</html>

ফলাফল



অধ্যায়ের সারাংশ

  1. আন-অর্ডার লিস্ট তৈরি করার জন্য <ul> এলিমেন্ট ব্যবহার করা হয়।
  2. লিস্টের আইটেম গুলোকে স্টাইল করার জন্য সিএসএস list-style-type প্রোপার্টি ব্যবহার করা হয়।
  3. অর্ডার লিস্ট তৈরি করার জন্য <ol> এলিমেন্ট ব্যবহার করা হয়।
  4. লিস্ট আইটেমগুলোকে অন্তর্ভূক্ত করার জন্য <li> এলিমেন্ট ব্যবহার করা হয়।
  5. ডেস্ক্রিপশন লিস্ট তৈরি করার জন্য <dl> এলিমেন্ট ব্যবহার করা হয়।
  6. ডেস্ক্রিপশন লিস্টের ডেটাকে বর্ণনা(describe) করার জন্য এইচটিএমএল <dd> এলিমেন্ট ব্যবহার করা হয়।
  7. একটি লিস্টের মধ্যে অন্য আরেকটি লিস্ট ব্যবহার করাকে নেস্টেড বলা হয়।
  8. একটি লিস্টের মধ্যে অন্যান্য এইচটিএমএল এলিমেন্টও রাখা যায়।
  9. লিস্টকে আনুভূমিকভাবে প্রদর্শন করানোর জন্য সিএসএস float:left অথবা display:inline প্রোপার্টি ব্যবহার করা হয়।