HTML मे जब हम <p> Tag का इस्तेमाल करते हैं तब उसमे by default Alignment Left होता है | मतलब Paragraph Browser Window में बाईं तरफ से शुरू होकर दाँयें तरफ जाता है |

Paragraph <p> Tag in HTML

आप Paragraph की Default Alignment को Align Attribute के द्वारा Override कर सकते हैं| मतलब Alignment को आप अपनी मन मुताविक बदल सकते हैं | परन्तु HTML5 Aline Attribute को support नही करता है |इसलिए कुछ latest browsers जो HTML5 को ही support करते हैं उसमे Align Attribute का effect नही दिखता है | तब CSS(Cascading Style Sheets) का इस्तेमाल किया जाता है | इस lesson मे दोनों process बताये गए है |

HTML document में Paragraph को चार प्रकार से Align किया जा सकता है

  1. Left Alignment
  2. Right Alignment
  3. Center Alignment
  4. Justify Alignment

Left Alignment

Left Alignment HTML Paragraphs मे By Default Set होता है| इस Alignment में Paragraph Browser Window में बायें से दायें तरफ जाता है| दुनिया की अधिकतर भाषाओं को लिखने में Left Alignment का ही इस्तेमाल किया जाता है| आप Left Alignment इस प्रकार Set कर सकते है.

HTML Code

<p align=”left”>This paragraph is left align.</p>

CSS Code

<p style=”text-align:left”>This paragraph is left align.</p>

Right Alignment

Right Alignment से Paragraph Browser Window में दांए तरफ सरक जाता है| Paragraph का Right Alignment इस प्रकार Set किया जाता है|

HTML Code

<p align=”right”>This paragraph is right align.</p>

CSS Code

<p style=”text-align:right”>This paragraph is right align.</p>

Center Alignment

Center Alignment से Paragraph Browser Window के बिल्कुल बीच में आ जाता है| Paragraph के बांए और दांए तरफ बराबर का Margin Set हो जाता है| Paragraph Center में दिखाई देता है| Center Alignment इस प्रकार Set किया जाता है|

HTML Code

<p align=”center”>This paragraph is center align.</p>

CSS Code

<p style=”text-align:center”>This paragraph is center align.</p>

Justify Alignment

Justify Alignment में Paragraph Text के बांए और दांए तरफ बराबर का Space रहता है | यह Alignment अखबार पत्रिकाओं और Official Document में दिखाई देता है | Paragraph में Justify Alignment को इस प्रकार Set किया जाता है|

HTML Code

<p align=”justify”>This paragraph is justify align.</p>

CSS Code

<p style=”text-align:justify”>This paragraph is justify align.</p>

हमने ऊपर बताए गए सभी Alignments को एक साथ लिखकर एक उदाहरण तैयार किया है | जिसमे सभी Alignments को अलग-अलग Paragraphs पर Apply करके दिखाया गया है | आप भी नीचे लिखे गए Codes को अपने Notepad में Type कीजिए| यंहा पर HTML और CSS दोनों का Coding लिखा गया हैं | दोनों process मे output एक ही जैसा दिखेगा| परन्तु आप अगर professional website बनाना चाहते हैं, तब CSS का ही प्रयोग करे |

HTML के मदद से Paragraph Alignment

<html>
<head>
<title>gseasytech.com</title>
</head>
<body>
<p align=”left”>This Paragraph is left align</p>
<p align=”right”>This Paragraph is right align</p>
<p align=”center”>This Paragraph is center align</p>
<p align=”justify”>This Paragraph is left align. A paragraph is a distinct section of writing covering one topic. A paragraph will usually contain more than one sentence. A paragraph starts on a new line. Sometimes, paragraphs are indented or numbered. … It will have detail sentences in the middle and end with a concluding sentence.</p>
</body>
</html>

इस code को paragraph-align.html नाम से save करे और browser मे open करे, तो आप को नीचे दिए हुए Output नजर आएगा |

Output

html

CSS के मदद से Paragraph Alignment

नीचे दिए हुए code मे CSS के मदद से Paragraph को Alignment दिया गया है | आप भी इस Code को अपने Notepad में Type कीजिए, या फिर आपने पुराने file paragraph-align.html को Notepad मे open करके जरूरी बदलाव कीजिए |

Note : किसी भी HTML file को Notepad मे open करने के लिए उस file पे right click करके open with मे click करे फिर Notepad मे क्लिक करे | इससे आप का file Notepad मे open हो जाएगा और आप उसे edit कर पाएंगे |

Code

<html>
<head>
<title>gseasytech.com</title>
</head>
<body>
<p style=”text-align:left”>This Paragraph is left align</p>
<p style=”text-align:right”>This Paragraph is right align</p>
<p style=”text-align:center”>This Paragraph is center align</p>
<p style=”text-align:justify”>This Paragraph is left align. A paragraph is a distinct section of writing covering one topic. A paragraph will usually contain more than one sentence. A paragraph starts on a new line. Sometimes, paragraphs are indented or numbered. … It will have detail sentences in the middle and end with a concluding sentence.</p>
</body>
</html>

अगर आप Code को type कर रहे हैं, या copy करके paste कर रहे हैं तब इस file को नए नाम के साथ save करे | अगर आप पुराने file मे edit कर रहे हैं तब सिर्फ Ctrl + s करके sabe करे ओर इसे browser मे open करे, तो आप को नीचे दिए हुए Output नजर आएगा |

Display

html

अगर आप को समझने मे कोई दिक्कत हुई हो या कुछ और जानकारी चाहते हैं तो नीचे comment करके जरूर बताए |

अगर आपको समझने में किसी प्रकार की समस्या हो तो नीचे कमेन्ट कर के अपना सवाल पूछ सकते हैं |

कृप्या पोस्ट को दोस्तों के साथ फ़ेसबुक और व्हाट्सअप मे शेयर करें |

PreviousIndex PageNext

Trending Topics

Posted in HTML

About Sangita

Leave a Comment