এইচটিএমএল প্যারাগ্রাফ

একটি প্যারাগ্রাফ বা অনুচ্ছেদ সর্বদা একটি নতুন লাইনে শুরু হয় এবং এটি সাধারণত একটি টেক্সট ব্লক।

HTML Paragraphs

এইচটিএমএল <p> এলিমেন্ট একটি অনুচ্ছেদ বা প্যারাগ্রাফ  সংজ্ঞায়িত করে

একটি অনুচ্ছেদ সর্বদা একটি নতুন লাইনে শুরু হয় এবং ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে অনুচ্ছেদের আগে এবং পরে কিছু সাদা স্থান (মার্জিন) যুক্ত করে।

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p> এটি একটি প্যারাগ্রাফ ।</p>
<p> এটি আর একটি প্যারাগ্রাফ </p>
<p> এটি একটি প্যারাগ্রাফ ।</p> <p> এটি আর একটি প্যারাগ্রাফ </p>
<p> এটি একটি প্যারাগ্রাফ ।</p>
<p> এটি আর একটি প্যারাগ্রাফ </p>

নিজে চেষ্টা করুন

এইচটিএমএল ডিসপ্লে

এইচটিএমএল কীভাবে প্রদর্শিত হবে তা আপনি নিশ্চিত হতে পারবেন না।

বড় বা ছোট পর্দা এবং যেগুলো ক্রিন সাইজ বদল করতে পারে অর্থাৎ রেসপনসিভ উইন্ডোগুলি বিভিন্ন ফলাফল তৈরি করবে।

আপনি আপনার এইচটিএমএল কোডে অতিরিক্ত স্পেস বা অতিরিক্ত লাইন যুক্ত করে প্রদর্শনটি পরিবর্তন করতে পারবেন না।

ব্রাউজার স্বয়ংক্রিয়ভাবে কোনও অতিরিক্ত স্থান এবং লাইন সরিয়ে ফেলবে:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p>
This is just a p tag to show some paragraph in
this web page. Now I am learning HTML p tag to write some paragraph
in this web page. Later on I will learn some more tag to
create my own website.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Voluptatibus id rem consectetur, perferendis ipsum ullam
voluptate aspernatur tempora consequuntur architecto
eius dolorum, eligendi ab placeat? Eius vitae quisquam enim
officiis!
</p>
<p> This is just a p tag to show some paragraph in this web page. Now I am learning HTML p tag to write some paragraph in this web page. Later on I will learn some more tag to create my own website. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus id rem consectetur, perferendis ipsum ullam voluptate aspernatur tempora consequuntur architecto eius dolorum, eligendi ab placeat? Eius vitae quisquam enim officiis! </p>
<p>
        This is just a p tag to show some paragraph in 
this web page.  Now I am learning HTML p tag to write some paragraph
 in this web page. Later on I will learn some more tag to
 create my own website.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing 
elit. Voluptatibus id rem consectetur, perferendis ipsum ullam
 voluptate aspernatur tempora consequuntur architecto 
eius dolorum, eligendi ab placeat? Eius vitae quisquam enim 
officiis!
    </p>

নিজে চেষ্টা করুন

এইচটিএমএল অনুভূমিক রেখা

<hr> ট্যাগটি এইচটিএমএল পৃষ্ঠায় একটি থিম্যাটিক বিরতি সংজ্ঞায়িত করে এবং প্রায়শই একটি অনুভূমিক রেখা হিসাবে প্রদর্শিত হয়।

<hr> এলিমেন্ট টি এইচটিএমএল পেজের উপাদান গুলো আলাদা করতে (বা পরিবর্তনের সংজ্ঞা দিতে) ব্যবহৃত হয়:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<h1>This is an example of hr tag</h1>
<hr>
<h2>This is a HTML hr tag example!</h2>
<p> Use for HTML hr tag </p>
<hr>
<p>Some text as paragraph</p>
<h1>This is an example of hr tag</h1> <hr> <h2>This is a HTML hr tag example!</h2> <p> Use for HTML hr tag </p> <hr> <p>Some text as paragraph</p>
 <h1>This is an example of hr tag</h1> 
 <hr>        
 <h2>This is a HTML hr tag example!</h2>        
 <p> Use for HTML hr tag </p> 
 <hr> 
<p>Some text as paragraph</p>

নিজে চেষ্টা করুন

<hr> ট্যাগটি একটি খালি ট্যাগ, যার অর্থ এটির কোনও ক্লোজিং ট্যাগ নেই।

HTML লাইন বিরতি

এইচটিএমএল <br> ট্যাগ টি একটি লাইন বিরতি নির্ধারণ করে।

নতুন অনুচ্ছেদ শুরু না করেই যদি আপনি একটি লাইন ব্রেক (একটি নতুন লাইন) চান তবে <br> ব্যবহার করুন:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p>আমার প্রথম প্যারাগ্রাফ. <br>আমি নিজে নিজই HTML শিখবো</p>
<p>আমার প্রথম প্যারাগ্রাফ. <br>আমি নিজে নিজই HTML শিখবো</p>
<p>আমার প্রথম প্যারাগ্রাফ. <br>আমি নিজে নিজই HTML শিখবো</p>

নিজে চেষ্টা করুন

<br> ট্যাগটিও একটি খালি ট্যাগ, যার অর্থ এটির কোনও ক্লোজিং ট্যাগ নেই।

<br> ট্যাগ  প্যারাগ্রাফ পরিবর্তন না করেই নতুন লাইন তৈরি করে

কবিতা সমস্যা

কবিতার প্রতিটি লাইন আলাদা আলাদা ভাবে প্রদর্শিত হয়: কিন্তু এগুলো লাইন আলাদা আলাদা না হয়ে পাশাপাশি আসবে 🙁

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p>
এসেছিল বহু আগে যারা মোর দ্বারে
যারা চলে গেছে একেবারে,
ফাগুন-মধ্যাহ্নবেলা শিরীষছায়ায় চুপে চুপে
তারা ছায়ারূপে
আসে যায় হিল্লোলিত শ্যাম দুর্বাদলে।
ঘন কালো দিঘিজলে
</p>
<p> এসেছিল বহু আগে যারা মোর দ্বারে যারা চলে গেছে একেবারে, ফাগুন-মধ্যাহ্নবেলা শিরীষছায়ায় চুপে চুপে তারা ছায়ারূপে আসে যায় হিল্লোলিত শ্যাম দুর্বাদলে। ঘন কালো দিঘিজলে </p>
<p>
  এসেছিল বহু আগে যারা মোর দ্বারে

  যারা চলে গেছে একেবারে,

  ফাগুন-মধ্যাহ্নবেলা শিরীষছায়ায় চুপে চুপে

  তারা ছায়ারূপে

  আসে যায় হিল্লোলিত শ্যাম দুর্বাদলে।

  ঘন কালো দিঘিজলে 
</p>

নিজে চেষ্টা করুন

কিন্তু এর ও সলুশন আছে 🙂

সমাধান <pre> tag

এইচটিএমএল <pre> এলিমেন্ট টি পূর্বনির্দিষ্ট (preformated) টেক্সট সংজ্ঞায়িত করে।

<pre> এলিমেন্ট টির অভ্যন্তরযে টেক্সটটি একটি নির্দিষ্ট-প্রস্থের ফন্টে (সাধারণত কুরিয়ার) প্রদর্শিত হয় এবং এটি ফাঁকা এবং নতুন লাইন উভয় বিরতি সংরক্ষণ করে:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<pre>
এসেছিল বহু আগে যারা মোর দ্বারে
যারা চলে গেছে একেবারে,
ফাগুন-মধ্যাহ্নবেলা শিরীষছায়ায় চুপে চুপে
তারা ছায়ারূপে
আসে যায় হিল্লোলিত শ্যাম দুর্বাদলে।
ঘন কালো দিঘিজলে
</pre>
<pre> এসেছিল বহু আগে যারা মোর দ্বারে যারা চলে গেছে একেবারে, ফাগুন-মধ্যাহ্নবেলা শিরীষছায়ায় চুপে চুপে তারা ছায়ারূপে আসে যায় হিল্লোলিত শ্যাম দুর্বাদলে। ঘন কালো দিঘিজলে </pre>
<pre> 
    এসেছিল বহু আগে যারা মোর দ্বারে
    
    যারা চলে গেছে একেবারে,
    
    ফাগুন-মধ্যাহ্নবেলা শিরীষছায়ায় চুপে চুপে
    
    তারা ছায়ারূপে
    
    আসে যায় হিল্লোলিত শ্যাম দুর্বাদলে।
    
    ঘন কালো দিঘিজলে  
  </pre>

নিজে চেষ্টা করুন

ওয়েব পেজের মধ্যে কোড গুলো দেখাতে <pre> ট্যাগ ব্যবহার হয়

যে যে ট্যাগ গুলো সম্পর্কে ধারনা পেলাম

ট্যাগবিবরন
<p>প্যারাগ্রাপ সংজ্ঞায়িত করে
<hr>কন্টেন্ট এ একটি বিষয়গত পরিবর্তনকে সংজ্ঞায়িত করে
<br>একটি নতুন লাইল বিরতি দেয়
<pre>pre-formatted বা আগে থেকে ফরম্যাট করা সংজ্ঞায়িত করে

One comment

কমেন্ট করুন

Your email address will not be published. Required fields are marked *