Text Formatting के Basic Elements
Text Formatting यानि html
पेज में लिखा गया Text ब्राउजर में किस तरह दिखेगा और इसके लिये किन tags का
प्रयोग होगा | जैसे -
This text is
bold
This text is italic
This is subscript and superscript
This text is italic
This
is computer outputThis is subscript and superscript
HTML में कई ऐसे
Elements हैं, जिनका प्रयोग Document के Texts को Markup करने व Structure करने के
लिए किया जाता है।
हम जो भी Document Create करते हैं,
वे सभी Documents विभिन्न प्रकार के Browsers में अलग तरीके से दिखाई देते हैं।
इसलिए यहां हम केवल Text को Markup व Structure करने से सम्बंधित Elements की बात
कर रहे हैं, Document के Appearance से सम्बंधित किसी तरह की कोई जानकारी हम यहां प्राप्त
नहीं कर रहे हैं।
Document के Appearance से सम्बंधित जानकारी हम CSS Files Create करते समय प्राप्त करेंगे। इस
Section में हम जिन Basic Text Formatting Elements के बारे में जानेंगे, वे निम्नानुसार
हैं:
- h1, h2, h3, h4, h5, h6
- p, pre, br
यदि हम चाहते हैं
कि लोग हमारे Web Page के Content को ठीक तरह से पढ सकें, तो हमें हमारे Text के
Structuring का विशेष ध्यान रखना होता है क्योंकि ज्यादा बडे, ज्यादा छोटे, बिखरे
हुए और जो Text ठीक से दिखाई ना दे, ऐसे Text को लोग नहीं पढते हैं। इसलिए उपरोक्त
Elements का प्रयोग करके हम हमारे Document के Texts को इस तरह Manage कर सकते
हैं, ताकि हमारे Content को पढना व समझना लोगों के लिए आसान हो।
Heading बनाना - <hn> Elements
हम चाहे
जिस प्रकार का Document Create कर रहे हों, उनमें किसी ना किसी तरह का Heading
जरूर होता है, जो हमारे Content के Theme को सरल तरीके से Represent करने का काम
करते हैं।
जब Content काफी बडा होता है, तब उस Content को विभिन्न प्रकार की
Heading के अन्तर्गत लिखकर हम हमारे Content को ज्यादा बेहतर तरीके से Represent
कर सकते हैं।
HTML Document में हम 6 Level तक की Heading बना सकते हैं, जिनके
लिए हम
<h1>
<h2>
<h3>
<h4>
<h5> व
<h6>
Elements Use कर सकते हैं।
<h1> Element के बीच लिखे गए Text अन्य सभी
Headings की तुलना में ज्यादा बडे दिखाई देते हैं और सभी Headings की Size क्रम से
कम होती जाती है।
हालांकि हम चाहें तो CSS Rules का प्रयोग करके इन सभी Headings
की Size, Color आदि को Change कर सकते हैं। इन सभी Heading Elements में हम सभी
Universal Attributes का प्रयोग कर सकते हैं, जो कि निम्नानुसार हैं:
align
class
id
style
title
ir
lang xml:lang
|
<html>
<head>
<title>HTML in hindi – by Indian books publication
</title>
</head>
<body>
<h1>This is Largest heading</h1>
<h2>This is a heading</h2> <h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5> <h6>This is smallest heading</h6>
</body>
</html>
|
The align Attribute
हम हमारी Heading
को Left, Center अथवा Right में से जिस स्थान पर Display करना चाहते हैं, align
Attribute के साथ Left, Right अथवा Center में से किसी मान को Specify करके हम
अपनी Heading को उसी स्थान पर Display कर सकते हैं।
चूंकि ये Attribute Document
के Structure से सम्बंधित नहीं है, बल्कि Document के Style से सम्बंधित है,
इसलिए इस Attribute को HTML से Deprecate करके Cascading Style Sheet में Include
कर लिया गया है।
Paragraph बनाना – <p> Element
ये Element हमें
अपने Text को Structure करने का एक और तरीका प्रदान करता है। हमें जिस किसी भी
Text को Paragraph के रूप में Render करना होता है, उस Paragraph Text को हम
<p></p> Tag Pair के बीच लिख सकते हैं।
Browser जब भी किसी <p>
Tag को प्राप्त करता है, वह अगले Paragraph के Content को Display करने से पहले एक
नई Insert कर देता है। इसलिए हर Paragraph एक नई Line से शुरू होता है।
इस
<p> Elements के साथ भी हम सभी निम्न Universal Attributes का प्रयोग कर
सकते हैं:
align
class
id
style
title
dir
lang xml:lang
|
<html>
<head>
<title>learn HTML in hindi – by Indian books publication </title>
</head>
<body>
<p>This is First Paragraph</p>
<p>This is Second Paragraph</p>
<p>This is Third Paragraph</p>
</body>
</html>
|
Preformatted Text Creation – <pre> Element
कई बार हम चाहते
हैं कि जिस तरह से हम किसी Text को Source File में लिख रहे हैं, वह Text ज्यों
का त्यों Browser में दिखाई दे, क्योंकि हमारे Texts को Web Browser स्वयं ही
Wrap करता रहता है और हम चाहते हैं कि Browser हमारे Text को Automatically Wrap
ना करे। इस तरह की जरूरत को पूरा करने के लिए हम <pre> Element का प्रयोग कर
सकते हैं।
इस Element के बीच लिखा गया कोई भी Text ज्यों का त्यों Web Browser
में Render होता है। सामान्यतया ज्यादातर Browsers इस Element में लिखे गए
Contents को Default रूप से Monospaced Font में ही Display करते हैं।
<pre>
Element का सबसे Common उपयोग Tabular Data को बिना Tables का प्रयोग किए हुए
Table की तरह Display करने व किसी Programming Language के Computer Codes को ज्यों
का त्यों Display करने के लिए किया जाता है।
<!DOCTYPE html>
<html>
<head>
<title>learn HTML in hindi – by Indian books publication </title>
</head>
<body>
<pre>
void main()
{
printf(“Hello HTML”);
}
</pre>
</body>
</html>
|
Line Break Creation – <br> या <br /> Element
हम हमारे Content
को जब भी कभी एक नई Line में Display करवाना चाहते हैं, तब हम इस Element का
प्रयोग कर सकते हैं।
इस Element का कोई Closing Tag नहीं होता है बल्कि एक ही Tag
में Tag के नाम के बाद एक Space देकर Forword Slash का प्रयोग किया जाता है, जो कि
Tag के अन्त को Represent करता है। इस प्रकार के Tags, जिनका कोई Closing Tag ना
हो, Empty Tags कहलाते हैं।
यदि हमें हमारे Text के बीच एक से ज्यादा Blank Lines
की जरूरत हो, तो हम इस Element को एक से ज्यादा बार उपयोग में ले सकते हैं।
यदि हम <p>
Element का प्रयोग ना करें तो ये Element Paragraph Element की तरह का ही Effect
देता है। लेकिन जब हम <p> Element का प्रयोग नहीं करते हैं, तब हमें पता
नहीं चल पाता है कि कौनसा Paragraph कहाँ से शुरू हो रहा है।
इसलिए HTML
में <br /> Element को केवल किसी Block Level Element के साथ ही Use किया जा
सकता है।
Block Level Elements के बारे में हम बाद में जानेंगे, जहां <p> भी
एक Block Level Element होता है। इस Element के साथ हम Core Attributes का प्रयोग
करने के साथ ही clear Attribute का भी प्रयोग कर सकते हैं, जिसका प्रयोग Images के
साथ किया जाता है और Images के बादे में हम आगे जानेंगे।
clear
class
id
style
title
|
<html>
<body>
This is First Line <br/>
This is another Line <br /><br />
This is last Line <br />
</body>
</html>
|
No comments:
Post a Comment