HTML Tutorials के इस Lesson में हम आपको HTML Paragraph Element की पूरी जानकारी देंगे. आप जानेंगे कि HTML Paragraph Element क्या है? HTML Document में Paragraph Define कैसे किया जाता है?
HTML Paragraph Element को आसानी से समझने के लिए इस Lesson को कई अलग Sections में Divide किया है. जिनकी List नीचे दी जा रही है.
Table of Content
- HTML Paragraph का परिचय – Introduction to HTML Paragraph in Hindi
- HTML Paragraph Element के बारे में जानने योग्य कुछ जरूरी बातें
- HTML Paragraph का उदाहरण – Example of HTML Paragraph
- Paragraph Alignment
- Paragraph Alignment का उदाहरण – Paragraph Alignment Example
- Paragraph Indent
- Paragraph Display Problems
- Line Breaks
- आपने क्या सीखा?
1. HTML Paragraph का परिचय – Introduction to HTML Paragraph in Hindi
एक HTML Document के Main Content को Paragraphs के माध्यम से लिखा जाता है. HTML में P Element द्वारा Paragraph को Define किया जाता है. HTML P Element का पूरा नाम HTML Paragraph Element होता है.
HTML P Element एक Block Level Element होता है. जो Content को Blocks में दिखाता है. मतलब Text का एक समूह बन जाता है.
आप एक Webpage में एक से ज्यादा Paragraph (s) Define कर सकते है. प्रत्येक New Paragraph को Opening <p>
Tag द्वारा Define किया जाता है. और Closing </p>
Tag द्वारा बंद किया जाता है.
2. HTML P Element के बारे में जानने योग्य कुछ जरूरी बातें
- HTML P Element एक Basic HTML Tag है. जिसे Block Level Element भी कहा जाता है.
- HTML Paragraph को
<p>
Tag द्वारा Define किया जाता है. और Closing</p>
Tag द्वारा बंद किया जाता है.
Note – Closing</p>
Tag का इस्तेमाल जरूर करें. - P Element में सभी Global Attributes का उपयोग किया जा सकता है. इसके अलावा P Element Event Attributes को भी Support करता है.
- सभी ब्राउजर Paragraph के ऊपर और नीचे कुछ Space Add कर देते है. यह कार्य Browsers’ कि Built-in Style Sheet द्वारा होता है.
- ब्राउजरों की Default Style को Additional CSS द्वारा Override किया जा सकता है.
3. HTML Paragraph का उदाहरण – Example of HTML Paragraph
नीचे लिखे गए HTML Code को अपने Notepad में Copy करके Paste कीजिए या फिर इस कोड को सीधे अपने हाथों से Type कीजिए.
<html>
<head>
<title>HTML Paragraph Example</title>
<body><p>Here is First Paragraph Text</p>
<p>This is Second Paragraph.</p>
</body>
</html>
ऊपर लिखे गए HTML Code को html-paragraph.html के नाम से Save कीजिए. और इसे अपने पसंदीदा ब्राउजर में Open कीजिए. यह HTML File आपको इस प्रकार का Output Display करेगी.
Here is First Paragraph Text.
This is Second Paragraph.
4. Paragraph Alignment
By Default HTML Paragraph का Alignment Left होता है. मतलब Paragraph Browser Window में बांई तरफ से शुरू होकर दांए तरफ जाता है. Paragraph की यहिं Setting आप समाचारपत्रों, पत्रिकाओं में भी देखते है.
आप Paragraph की Default Alignment को Align Attribute के द्वारा Override कर सकते है. HTML Align Attribute के द्वारा एक Paragraph के लिए चार Alignments Set किए जा सकते है.
- Left Alignment
- Right Alignment
- Center Alignment
- Justify Alignment
Left Alignment
Left Alignment HTML Paragraphs का By Default ही Set होता है. इस Alignment में Paragraph Browser Window में बांए से दांए तरफ जाता है. दुनिया की अधिकतर भाषाओं के लेखन कार्य में Left Alignment का ही उपयोग किया जाता है. आप Left Alignment इस प्रकार Set कर सकते है.
Right Alignment
Right Alignment से Paragraph Browser Window में दांए तरफ सरक जाता है. लेकिन, उसे पढा तो बांए से दांए ही जाता है. Paragraph का Right Alignment इस प्रकार Set किया जाता है.
Center Alignment
Center Alignment से Paragraph Browser Window के बिल्कुल बीचोबीच आ जाता है. Paragraph के बांए और दांए तरफ बराबर का Margin Set हो जाता है. और Paragraph Center में दिखाई देता है. इस प्रकार का Alignment इस प्रकार Set किया जाता है.
Justify Alignment
Justify Alignment अखबार और पत्रिकाओं में दिखाई देता है. और ज्यादातर औपचारिक लेखन में Justify Alignment का ही उपयोग किया जाता है. इस Alignment से Paragraph Text के बांए और दांए तरफ बराबर का Space रहता है. Paragraph में Justify Alignment को इस प्रकार Set किया जाता है.
5. Paragraph Alignment Example
हमने ऊपर बताए गए सभी Alignments को एक साथ लिखकर एक उदाहरण तैयार किया है. जिसमे सभी Alignments को अलग-अलग Paragraphs पर Apply करके दिखाया गया है. आप भी नीचे लिखे गए HTML Codes को अपने Notepad में Copy करके Paste कीजिए. या फिर अपने हाथों से Type कीजिए.
<html>
<head>
<title>Paragraph Alignment Example</title>
<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 justify align.</p>
</body>
</html>
ऊपर दिए गए HTML Code को paragraph-alignment.html के नाम से Save कीजिए. और इसे अपने ब्राउजर में Open कीजिए. यह कोड आपको इस प्रकार का Output दिखाएगा.
This paragraph is left align.
This Paragraph is right align.
This paragraph is center align.
This paragraph is justify align.
6. Paragraph Indent
Indent का मतलब होता है – सरकना. मतलब आप Paragraph को उसकी Default Position से ज्यादा या कम सरका देते है. Paragraph Indenting को आप सिर्फ Paragraph पर ही नही Apply कर सकते है. इसके अलावा भी आप Indenting Set कर सकते है. जिनके बारे में नीचे बताया जा रहा है.
- First Line Indenting
- Paragraph Indenting
- Indenting a Section of Document
- Whole Document Indenting
इस Lesson में सिर्फ हम पहली प्रकार की Indenting के बारे में जानेंगे. क्योंकि सभी प्रकार की Indenting के बारे में बताना इस Lesson में संभव नही है. यदि आप सभी प्रकार की Indenting के बारे में जानना चाहते है तो हमने Paragraph Indenting और Line Spacing के ऊपर अलग से Tutorial बनाया है. आप इस Tutorial से Indenting के बारे में पढ सकते है.
First Line Indenting
First Line Indenting का मतलब होता है, एक Paragraph की पहली Line को बाकि Line के मुकाबले Indent करना मतलब सरकाना. अगर सीधे शब्दों में कहे तो आप पहली Line को थोडा ज्यादा सरका देते है. यही Setting आप अखबार, पत्रिकाएं, किताबों में देखते है.
आप एक Document में उपलब्ध सभी Paragraphs की पहली Line को नीचे दिए गए HTML Code की सहायता से Indent कर सकते है.
<html>
<head>
<title>Paragraph Indenting Rule Example</title><style>
p {text-indent: 15px;}
</style>
<body>
</body>
</html>
यदि आप ऊपर लिखे गए Style Rule को अपने HTML Document पर Apply करते है. तो इससे Document में उपलब्ध सभी Paragraphs की पहली Line में 15px का Indent हो जाएगा. आप अपने हिसाब से इसे कम या ज्यादा कर सकते है.
यदि आप किसी Paragraph विशेष की पहली Line को Indent करना चाहते है. तो उस Paragraph में text-indent Attribute का इस्तेमाल करके Indenting कर सकते है. उदाहरण:
7. Paragraph Display Problems
जब Browser किसी HTML Document को Display करता है, तो वह Paragraph में Extra Spaces और Lines को Ignore कर देता है. और Users को Text को Paragraph के रूप में Display करता है.
इसे Try कीजिए
नीचे दिए गए HTML Code को अपने Text Editor में लिखकर Save कीजिए और इस HTML File को Browser में Run कीजिए. और देखिए आपको क्या दिखाई देता है?
<html>
<head>
<title>Paragraph Display Problem Example</title><body>
<p>
This is a Paragraph.
</p>
</body>
</html>
ऊपर दिया कोड आपको कुछ इस प्रकार का Output देगा.
This is a paragraph.
आपने ध्यान दिया हो तो हमने HTML Code में Paragraph Text में Space दिया है. Browser ने उस अतिरिक्त Space को Ignore कर दिया है और Text को साधारण रूप में दिखाया है.
Browser द्वारा Extra Spaces और Lines को Ignore करने की वजह से एक Problem Create होती है. जिसे HTML Experts, “The Poem Problem” कहते है. आइए जानते है ये Poem Problem क्या होती है? और इसका Solution क्या है?
The Poem Problem
जब आप Tex Editor में कोई Poem लिखते है तो ब्राउजर में उसका परिणाम एक Text Block के रूप में दिखाई देता है. आपके द्वारा दिए गए अतिरिक्त Spaces और Line Breaks को Ignore कर दिया जाता है. जिसके कारण आप HTML Document में Poem नही लिख पाते है. और यही वास्तविक Poem Problem कहलाती है.
Poem Problem की समस्या को सुलझाने के लिए <pre>
Element का इस्तेमाल किया जाता है. Preformatted Element के अंदर जिस प्रकार आप Text को लिखते है, Browser में भी उसी तरह Display होता है. <pre>
Element आपके द्वारा दिए गए अतिरिक्त Spaces और Line Breaks को Preserve करता है.
इसे Try कीजिए
हम ऊपर लिखे HTML Code को दुबारा ले रहे है. बस इसमें <pre>
Element का उपयोग किया गया है. आप नीचे दिए गए HTML Code को अपने Text Editor में लिखकर Save कीजिए और इस HTML File को Browser में Run कीजिए. और देखिए आपको क्या दिखाई देता है?
<html>
<head>
<title>Paragraph Display Problem Example</title><body>
<p>
<pre>This is a Paragraph.</pre>
</p>
</body>
</html>
ऊपर दिया कोड आपको कुछ इस प्रकार का Output देगा. आप देख सकते है कि Preformatted Element से आपके द्वारा दिए गए Extra Spaces को ब्राउजर द्वारा दिखाया गया है. आप इस प्रकार अपने हिसाब से Paragraph में Text को लिख सकते है.
This is a paragraph.
8. Line Breaks
जब आप एक Paragraph में ही New Line शुरू करना चाहते है तो इसके लिए <br>
Element का उपयोग किया जाता है. आप MS Word की तरह Enter दबाकर नयी लाईन नहि दे सकते है. अगर आप ऐसा करेंगे तो Poem Problem Create हो जाएगी.
<br>
Element एक Paragraph में नयी लाईन Define करता है. आप अपनी मर्जी के अनुसार Line Breaks दे सकते है. आप Line Breaks की कोडिंग इस प्रकार कर सकते है. नीचे देंखे
आपने क्या सीखा?
इस Lesson में आपको HTML Paragraph Element के बारे में पूरी जानकारी दी है. HTML Paragraph कैसे define किया जाता है? Paragraph Alignment क्या है? Paragraph Indenting क्या है? आदि के बारे में Example द्वारा समझाया है. इसके अलावा कुछ सामान्य Paragraph Display Problems के बारे में भी जानकारी दी है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोग साबित होगा.
#BeDigital
Bahot achha hai