Style का मतलब होता है, सजाना. यानि, एक HTML Document को Style करना. वैसे तो Style के लिए CSS का उपयोग किया जाता है. लेकिन, आप सिर्फ HTML की मदद से भी कुछ सीमा तक एक HTML Document को अपने हिसाब से Style कर सकते है HTML Document की Style में Font Change करना, Font Family Change करना, Background Change करना, Text Color Change करना आदि को शामिल किया जाता है.
HTML द्वारा Document को Style करने के लिए दो तरीके अपनाए जाते है:
HTML Style Tag द्वारा Style करना
Style Attribute द्वारा Style करना
इस Lesson में हम आपको Style Tag और Style Attribute की पूरी जानकारी देंगे. इस Lesson को हमने निम्न भागों में विभाजित किया है:
1. Style Tag का परिचय – Introduction to Style Tag in Hindi
HTML <style> Tag का इस्तेमाल किसी Element की Style Information को Define करने के लिए किया जाता है.
हम Style Element को HTML Document की Mini CSS भी कहते है. क्योंकि इस Element के द्वारा आप एक Webpage की Inline CSS Define कर सकते है.
1.1 Syntax of Style Tag
Style Element को HTML Document के Head Section में Define किया जाता है. और वहीं किसी Specific Element के लिए Style Rule Define किये जाते है.
इसे देंखे:
<!DOCTYPE html> <html> <head> <title>Style Tag Example</title><style attributes…>
Style Rule Here…
</style> </head> <body>
</body> </html>
इसे समझिए:
ऊपर दिए गए HTML Code से हमने Style Tag के Syntax को समझाया है. बाकि Elements (!DOCTYPE, html, head, body आदि) से तो आप अच्छी तरह परिचित है. इसमें हमने Head Element में Style Element और Define किया है.
Style Element को भी अन्य HTML Elements की तरह ही Define किया जाता है. पहले Opening Tag – <style> अगर इसमे कोई Attribute इस्तेमाल करना है, तो उसे भी यहीं Define कीजिए. फिर Content (यहाँ Style Rules) और इसके बाद Closing Tag – </style>.
1.2 Commonly Used Attributes with Style Tag
Style Tag के साथ आप Global Attributes और Event Attributes दोनों को Define कर सकते है. इनके अलावा कुछ अन्य Important Attributes भी है, जो Style Tag के साथ Define किए जाते है:
type: यह Attribute Media Type को Define करता है.
media: यह Attribute Media Resource को Define करता है. मतलब आप किस प्रकार की Media (All, Print, Screen, TV आदि) के लिए Style Information Define कर रहे है.
2. Style Attribute का परिचय – Introduction to Style Attribute in Hindi
Style Element की तरह Style Attribute भी HTML में Style Information को Define करता है. Style Element को Document के Head Section में Define किया जाता है, और Style Attribute को किसी भी Element में Attribute की तरह इस्तेमाल किया जाता है. क्योंकि यह एक Standard Attribute भी है.
Style Element द्वारा आप एक बार में ही सभी Document Element की Style Information Define कर सकते है. लेकिन, Style Attribute द्वारा प्रत्येक Element में अलग-अलग Style Information Define करना पडता है. Style Attribute को इस प्रकार Define किया जाता है.
2.1 Syntax of Style Attribute
<tagname style=”property: value;”>
Tagname: यहाँ आप कोई भी Tag लिख सकते है. जिसके लिए आप Style Information लिखना चाहते है. लेकिन, वह Element Body Element के भीतर ही Define होना चाहिए.
Property: यह CSS Property होती है. मतलब, जो Style आप Element के लिए Use करना चाहते है. इसे आप “What” भी कह सकते है.
Value: यह CSS Value होती है. मतलब, आप Element के लिए कैसी Style लगाना चाहते है. इसे आप “How” भी कह सकते है.
Note: CSS Property और CSS Value Pre-defined होती है. मतलब इन्हे पहले से ही बना दिया गया है. आप इन्हे ही इस्तेमाल कर सकते है. आप खुद CSS Rule नही बना सकते है.
अब हम कुछ Style Rule HTML Documents के लिए Define कर रहे है. जिसमे Style Attribute का इस्तेमाल किया गया है. लेकिन, इसके बाद हम आपको सभी Style Rules को एक साथ Style Tag के द्वारा भी Define करना बताएंगे.
3. HTML Document का Background Change करने का तरीका
HTML Document का Background Color Change करने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlbackground.html नाम से Save कीजिए. और इसे Open कीजिए.
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Gray Background.
उदाहरण को समझिए:
ऊपर दिए गए HTML Code में हमने HTML Document का Background बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें background-color Property का Use किया गया है. हमने यहाँ Background Color Gray Set किया है. आप यहाँ अपनी पसंद का कोई भी Color लिख सकते है.
4. HTML Document का Text Color Change करने का तरीका
HTML Document का Text Color Change करने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmltextcolor.html नाम से Save कीजिए. और इसे Open कीजिए.
<!DOCTYPE html> <html> <head> <title>HTML Text Color Example</title></head> <body style=”color:green;”>
<p>This is Green Color Text.</p>
<p style=”color:red;”>This is Red Color Text.</p>
<p>This is Green Color Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Green Color Text.
This is Red Color Text.
This is Green Color Text.
उदाहरण को समझिए:
ऊपर दिए गए HTML Code में हमने HTML Document का Text Color बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें color Property का Use किया गया है. हमने यहाँ Background Color Green Set किया है. आप यहाँ अपनी पसंद का कोई भी Color लिख सकते है.
5. HTML Document में Font Size Change करने का तरीका
HTML Document का Font Size Change करने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlfontsize.html नाम से Save कीजिए. और इसे Open कीजिए.
<!DOCTYPE html> <html> <head> <title>HTML Font Size Example</title></head> <body style=”font-size:25px;”>
<p>This is 25 Pixel Font Size Text.</p>
<p style=”font-size:15px;”>This is 15 Pixel Font Size Text.</p>
<p>This is 25 Pixel Font Size Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is 25 Pixel Font Size Text.
This is 15 Pixel Font Size Text.
This is 25 Pixel Font Size Text.
उदाहरण को समझिए:
ऊपर दिए गए HTML Code में हमने HTML Document का Font Size बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें font-size Property का Use किया गया है. हमने यहाँ Font Size 25px Set किया है. आप यहाँ अपनी पसंद का कोई भी Font Size लिख सकते है.
6. HTML Document में Font Family Change करने का तरीका
HTML Document का Font Family Change करने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlfontfamily.html नाम से Save कीजिए. और इसे Open कीजिए.
<!DOCTYPE html> <html> <head> <title>HTML Font Family Example</title></head> <body style=”font-family: Verdana;”>
<p>This is Verdana Font Text.</p>
<p style=”font-family: Arial;”>This is Arial Font Text.
<p>This is Verdana Font Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Verdana Font Text.
This is Arial Font Text.
This is Verdana Font Text.
उदाहरण को समझिए:
ऊपर दिए गए HTML Code में हमने HTML Document का Font Family बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें font-family Property का Use किया गया है. हमने यहाँ Font Family Verdana Set की है. आप यहाँ अपनी पसंद का कोई भी Font Use कर सकते है.
7. HTML Document में Text Alignment Change करने का तरीका
HTML Document का Text Alignment Change करने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmltextalign.html नाम से Save कीजिए. और इसे Open कीजिए.
<!DOCTYPE html> <html> <head> <title>HTML Text Alignment Example</title></head> <body style=”text-align:left;”>
<p>This is Left Aligned Text.</p>
<p style=”text-align:center;”>This is Center Aligned Text.</p>
<p>This is Left Aligned Text.</p>
</body>
</html>
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is Left Aligned Text.
This is Center Aligned Text.
This is Left Aligned Text.
उदाहरण को समझिए:
ऊपर दिए गए HTML Code में हमने HTML Document का Text Alignment बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें text-align Property का Use किया गया है. हमने यहाँ Text Alignment Left Set किया है. आप यहाँ अपनी पसंद का कोई भी Alignment Set कर सकते है.
नोट: एक बात और ध्यान रखें. यदि आप पूरे डॉक्युमेंट में एक जैसी Style इस्तेमाल करना चाहते है, तो आप Style Attribute को Body Tag में Define कीजिए. और यदि आप पूरे डॉक्युमेंट में Style अलग-अलग चाहते है, तो आप उसी Particular Paragraph में Style Attribute को Define कीजिए. जिसके लिए आप Style Information लिखना चाहते है.
अब तक आपने सभी Style Rules को Style Attribute के द्वारा Define किया है. आइए, अब इन सभी Style Rules को Style Tag द्वारा Define करते है.
जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:
This is 25px Green Center Aligned Text .
आपने क्या सीखा?
इस Lesson में हमने आपको HTML Document को Style करने की पूरी जानकारी दी है. आपने जाना है कि HTML Document का Background Change कैसे करते है? Text Color, Font Size, Font Family आदि को कैसे Change किया जाता है? हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.
is ka ek complete pdf mil sakta he kya hindi me usme complete html ho
अक्षय जी, फिलहाल तो ये तैयार नहीं है. लेकिन, दिसम्बर के बाद आपको मिल सकता है.