X

X

X

HTML অনুচ্ছেদ ( Paragraphs )


HTML অনুচ্ছেদ (Paragraph)

The HTML <p> element defines a paragraph:

HTML5 Paragraph

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Note: ব্রাউজার সমূহ নিজে থেকে প্যারাগ্রাফের সামনে ও পেছনে white space যোগ করে। এটি একটি ব্লক ইলামেন্ট।

HTML প্রদর্শন

নিশ্চিতভাবে বলা যাবে একই HTML page বিভিন্ন ব্রাউজারে কিভাবে উপস্থাপিত হবে।
বড় অথবা ছোটো স্ক্রিন, এবং resize window বিভিন্ন রকম আউটপুট তৈরি করে। তাছাড়া HTML এ অতিরিক্ত space যোগ করে আউটপুটের পরিবর্তন করা যায় না। ব্রাউজারসমূহ নিজে থেকে এইসব অতিরিক্ত space কে বাদ দিয়ে দিবে। শুধুমাত্র একটি space বিবেচনা করবে।

নিচের উদাহরণটি লক্ষ্য করুন।

HTML5 প্রদর্শণ

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains      a lot of spaces
in the source     code,
but the    browser 
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


End tag ব্যবহার করতে কখনই ভুলবেন না

Most browsers will display HTML correctly even if you forget the end tag:
বেশিরভাগ ব্রাউজারে End tag ব্যবহার না করলেও এটি সঠিকভাবে ফলাফল (output) উপস্থাপন করবে। তবে এটি সঠিক নিয়ম নয়।

HTML5 without end tag

<!DOCTYPE html>
<html>
<body> 

	<p>This is a paragraph.
	<p>This is a paragraph.

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণটি প্রায় সব ব্রাউজারে কাজ করবে কিন্তু কখনই ওভাবে কোডিং করবেন না। অনাকাঙ্খিত ফলাফল পেতে পারেন।

বিঃদঃ: আবারও বলছি End tag ব্যবহার না করলে অনাকাঙ্খিত ফলাফল পেতে পারেন।

HTML -এ নতুন লাইন (line break)

HTML-এ <br> এর মাধ্যমে নতুন লাইন তৈরি করা হয়। অর্থাৎ, এরপরে যা কিছু লিখা হবে তা একটি নতুন লাইন থেকে শুরু হবে।

paragraph ট্যাগ ব্যবহার ছাড়াই যদি নতুন একটি অনুচ্ছেদ তৈরি করতে চান তবে <br> ট্যাগ ব্যবহার করুন। তবে SEO এর ব্যাপারটি মাথায় রেখে paragraph tag অনেকক্ষেত্রে ব্যবহার করা ভালো।

HTML5 নতুন লাইন (br)

<p>This is<br>a paragraph<br>with line breaks</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


<br> tag একটি Empty tag, অর্থাৎ, এর কোনো কন্টেন্ট নেই কাজেই এর End tag ও নেই।


কবিতা উপস্থাপনে সমস্যা

নিচে একটি কবিতা উপস্থাপন করা হয়েছে, যেটি একই লাইনে উপস্থাপিত হবে।

HTML5 এ কবিতা উপস্থাপনে সমস্যা

<p>

  আমাদের দেশে হবে সেই ছেলে কবে,
  কথায় না বড় হয়ে কাজে বড় হবে।
  মুখে হাসি বুকে বল তেজে ভরা প্রাণ
  মানুষ হইতে হবে এই যার পণ।।

</p>

<p>মনে রাখবেন HTML এ একের অধিক space একটি হিসেবে বিবেচিত হয় 
এবং কোডের লাইন ব্রেক আউটপুটে লাইন ব্রেক
 হিসেবে কাজ করে না। এক্ষেত্রে <br /> ব্যবহার করতে হবে।</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML <pre> (পূর্বগঠিত) Element

HTML -এ <pre> দ্বারা preformatted text বোঝায়। অর্থাৎ, Source কোডে আপনার কন্টেন্ট যেভাবে ছিলো আউটপুটে সেটি একইভাবে উপস্থাপিত হবে। তারমানে এই নয় যে HTML ট্যাগ উপস্থাপিত হবে। Preformatted বলতে বোঝায়, white space, line break ইত্যাদি আউটপুটে বিবেচিত হবে।
তারমানে <pre> ট্যাগ white space এবং line break উভয়ই বিবেচন করে। লক্ষ্যনীয় যে, এর ভেতরে ডিফল্ট ফন্ট হিসেবে Courier Font ব্যবহৃত হয়।

HTML5 এ কবিতা উপস্থাপন সমস্যার সমাধান

<pre>

  আমাদের দেশে হবে সেই ছেলে কবে,
  কথায় না বড় হয়ে কাজে বড় হবে।
  মুখে হাসি বুকে বল তেজে ভরা প্রাণ
  মানুষ হইতে হবে এই যার পণ।।

</pre>

<p>মনে রাখবেন HTML এ একের অধিক space একটি হিসেবে বিবেচিত হয় 
এবং কোডের লাইন ব্রেক আউটপুটে লাইন ব্রেক
 হিসেবে কাজ করে না। এক্ষেত্রে <br /> ব্যবহার করতে হবে।</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Tag রেফারেন্স

HTML Tag রেফারেন্সে Element এবং Attribute সম্পর্কে অতিরিক্ত তথ্য রয়েছে।

Tag ব্যাখ্যা/বর্ণনা
<p> অনুচ্ছেদ নির্দেশ করে।
<br> ব্রাউজার আউটপুটে নতুন লাইন নির্দেশ করে।
<pre> ব্রাউজার আউটপুটে preformatted বা পূর্বগঠিত টেক্সট প্রদর্শন করে।