HTML क्या है क्या काम आती है और कैसे सीखें हिंदी में जानकारी

HTML क्या है क्या काम आती है और कैसे सीखें हिंदी में जानकारी

Internet पर उपलब्ध सारा डेटा वेब डॉक्युमेंट्स के रूप में उपलब्ध है. इन डॉक्युमेंट्स को कम्प्यूटर सर्वर पर सेव कर दिया जाता है. जहाँ से URL के जरिए इन्हे कोई भी एक्सेस कर सकता है.

क्या आपने कभी सोचा है ये वेब डॉक्युमेंट कैसे बनाते है? किस भाषा में लिखा जाता है, कौन वेब डॉक्युमेंट्स को लिखता है?

यदि आपके पास कोई जवाब नहीं है तो कोई बात. क्योंकि इसका जवाब हम आपको दे रहे हैं.

वेब डॉक्युमेंट्स को HTML Language में लिखा जाता है. जो एक मार्कअप लैंगुएज है. यह वेब डॉक्युमेंट्स का आधार होती है.

अब सवाल आता है यह HTML क्या होती है – What is HTML in Hindi?

कितना आसान सुनाई पढता है. एक साधारण सवाल है. हाँ साधारण, लेकिन एक उपयोगी प्रश्न जो प्रत्येक HTML सीखने वाले को जानना जरूरी है. क्योंकि यह तो बुनियाद है.

हम जिस भाषा में कार्य कर रहे है या चाहते है उसके बारे में तो हमें पता होना ही चाहिए. आइए, जानते है कि HTML क्या है?

click

introduction-to-html

HTML क्या है?

HTML एक MarkUp Language है, जिसे वेब डॉक्युमेंट (वेब पेज) बनाने के लिए विकसित किया गया है. इसका विकास 90 के दशक में हुआ था. यह एक वेब पेज का आधार होती है और वेब पेज एक वेबसाइट का आधार होते है. HTML वेब डॉक्युमेंट को बनाने के किए ‘Tags’ का इस्तेमाल करती है.

Description: HTML Kya Hai in Hindi

अब एक विचार जरूर आपके मन में खलबली मचा रहा होगा और ये होना भी चाहिए.

वह क्या है?

ऊपर HTML को Markup Language कहा गया है? लेकिन, ये Markup Language है क्या? आइए, इसे भी जानते है.

HTML Full Form in Hindi

HTML की Full Form या पूरा नाम Hypertext Markup Language होता हैं. जिसमें प्रत्येक शब्द का अलग-अलग मतलब होता हैं. आइए अब प्रत्येक शब्द का अर्थ जानते हैं. और समझते है कि HTML को Markup Language क्यों कहा जाता हैं?

Hypertext

हाइपरटेक्स्ट वह तरीका है जिसके द्वारा वेब को Explore किया जाता है. यह एक साधारण टेक्स्ट ही होता है. लेकिन, Hypertext अपने साथ किसी अन्य टेक्स्ट को जोड़े रखता है. जिसे माउस क्लिक, टैप से या कुंजि दबाकर सक्रिय किया जाता है.

इसकी यही विशेषता इसे साधारण टेक्स्ट से अलग करती है. हाइपरटेक्स्ट को हाइपरलिंक कहते है.

HTML के Anchor (< a >) Tags के द्वारा किसी भी टेक्स्ट को हाइपरलिंक बनाया जा सकता है. इसके अलावा, इमेज्स, वीडियो, साउण्ड आदि को भी हाइपरलिंक बनाया जा सकता है. इस प्रकार का लिंक डेटा Hypermedia कहलाता है.

Hypertext की एक और विशेषता होती है कि यह रेखीय (linear) नही होता है अर्थात हाइपरटेक्स्ट को किसी भी क्रम में सक्रिय किया जा सकता है.

Markup

HTML वेब डॉक्युमेंट बनाने के लिए “HTML Tags” का उपयोग करती है. प्रत्येक HTML Tag अपने बीच आने वाले टेक्स्ट को किसी प्रकार में परिभाषित करता है. इसे ही Markup कहते है. “<i>” एक HTML Tag है जो अपने बीच आने वाले टेक्स्ट को तिरछा (italic) करता है.

इसे एक उदाहरण से समझते है.

हम एक शब्द लेते है, ‘teachask’ जिसे साधारण लिखा गया है. जो हमें आम टेक्स्ट की तरह ही सीधा “teachask” दिखाई दे रहा है. अब हम इसे HTML के द्वारा Markup करते है. और Markup मे हम इसे तिरछा करते है. जब teachask को इन दोनो चिन्हों <i> </i> के बीच इस तरह <i> teachask</i> लिखा जायगा तो यह शब्द इस तरह तिरछा “teachask” दिखाई देगा. अर्थात इसे तिरछा (italic) Markup किया गया है.

इस पूरी प्रक्रिया को ही मार्क अप करना कहता है. और वेब पर मौजूद सभी वेब डॉक्युमेंट इसी तरह फॉर्मेट किए जाते हैं.

Language

HTML एक भाषा है. क्योंकि यह वेब डॉक्युमेंट बनाने के लिए code-words का इस्तेमाल करती है. जिन्हें Tags कहते है. और इन Tags को लिखने के लिए HTML का syntax भी है. इसलिए यह एक भाषा भी है. नीचे HTML का Syntax दिखाया गया है.

इसके तीन मुख्य भाग होते है. जो क्रमश: Element, Tags और Text है.

HTML Element, HTML Tag से मिलकर बनता है. Angel Bracket के बीच जो शब्द या अक्षर लिखा होता है, इसे HTML Tag कहते है. यह दो प्रकार का होता है. पहला, Opening tag और दूसरा Closing tag. और अंतिम भाग होता है टेक्स्ट जो HTML Tag के बीच लिखा जाता है.

HTML का इतिहास – HTML History in Hindi

आइए अब हम HTML की दुनिया में थोड़ा पीछे चलते है और इसके इतिहास को जानने कि एक कोशिश करते है.

HTML का विकास 90 के दशक में हुआ था और अभी भी जारी है. क्योंकि HTML एक लगातार विकास करने वाली भाषा है. इसके अब तक कई संस्करण आ चुके है.

यह भाषा माननीय Sir Tim Berners Lee के दिमाग की उपज है. सबसे पहले इन्होने ही HTML का उपयोग किया था.

वर्तमान समय में HTML के विकास का जिम्मा एक संस्था “World Wide Web Consortium (W3C)” के पास है. यह संस्था ही अब HTML का ख्याल रखती है. आइए जानते है अब तक आए HTML के संस्करणों के बारे में.

HTML

यह संस्करण SGML –Standard Generalized Markup Language का रूप था. HTML प्राथमिक संस्करण है.

इसके द्वारा टेक्स्ट को Structure किया जा सकता था. इसके लिए कुछ Tags का निर्माण किया गया था और इस संस्करण का कोई नाम नही था इसे सिर्फ HTML कहा गया. लेकिन HTML के अगले संस्करणो के नाम थे. इसलिए सुविधा के लिए इस संस्करण को HTML 1.0 भी कहा जाता है.

जो HTML Tags इस समय उपयोग में लिये जाते थे, कुछ Tags आज भी मौजूद है. जो हम HTML पर कार्य करते समय काम में लेते है.

HTML 2.0

HTML के प्राथमिक संस्करण के बाद एक समूह IETF – Internet Engineering Task Force द्वारा HTML के अगले संस्करण का नामकरण किया गया. यह HTML 2.0 संस्करण कहलाया जिसे 1995 में प्रकाशित किया गया था.

इस संस्करण में कुछ नयी विशेषताएँ जोड़ी गई जिसमें ‘Image Tag‘ सबसे महत्वपूर्ण था. लेकिन अभी Internet ज्यादा लोकप्रिय नही हुआ था.

HTML 3.0

इस समय तक HTML और इंटरनेट अपनी छाप छोड चुके थे और दोनो लोकप्रिय होने लगे थे. अब पहल से ज्यादा लोग इससे जुड चुके थे. अधिक से अधिक लोग HTML सीखना चाहते थे और Internet से जुडना भी चाहते थे.

इसलिए HTML के अधिक उपयोग के कारण इसमे कुछ उलझने पैदा हो गई थी. जो Standard इसमें तय किया था लोग उसमें परिवर्तन करने लगे थे. जिससे इसकी एकरूपता समाप्त होने लगी थी. इसलिए HTML का अगला संस्करण तैयार किया गया जो HTML 3.0 था. लेकिन इसे कभी भी प्रकाशित नही किया गया.

HTML 3.2

HTML 1.0 के प्रकाशन और HTML 3.0 की सिफारिश तक एक संगठन का उद्भव हो चुका था, जो HTML भाषा के लिए कार्य करने के लिए बना है. इसे W3C – World Wide Web Consortium के नाम से जाना जाता है.

W3C के द्वारा 1997 में HTML 3.0 की सिफारिशों के साथ HTML का अगला संस्करण HTML 3.2 का प्रकाशन किया गया. इसमें HTML के दोनों संस्करणों से ज्यादा विशेषता थी.

HTML 3.2 के द्वारा अब HTML Document को और अधिक तरीके से बनाया जा सकता था. इस संस्करण में कई नये ‘Attribute’ को जोडा गया जो डॉक्युमेंट के structure से ज्यादा उसकि ‘style’ के लिए थे. लेकिन, इस समय तक HTML को पढ़ने वाले यानि ‘ Browsers ‘ बहुत धीमें थे. ये अभी भी HTML 3.2 के सभी विशेषताओं को सपोर्ट नही करते थे.

HTML 4.0

अब Internet काफि लोकप्रिय हो चुका था. अधिक से अधिक लोग HTML सीखना चाहते थे. और जो पहले से ही इससे जुड़े थे. वे HTML से ज्यादा चाहने लगे. इसलिए इस रिक्त स्थान को भरने करने के लिए HTML का अगला संस्करण HTML 4.0 का प्रकाशन किया गया.

और अब तक ‘Style Sheet’ भी अपना स्थान बनाने लगी थी. इसलिए इस संस्करण में कुछ और विशेषताएं जैसे; frame, script, stylesheet आदि को जोडा गया. और इसे पढने वाले ब्राउजर भी अब कुछ एडवांस हो चुके थे. तथा HTML के अधिकतर विशेषताओं को पढ सकते थे. यह HTML के इतिहास में एक बड़ा बदलाव था.

HTML 4.01

HTML का अगला संस्करण HTML 4.01 था जो HTML 4.0 का संशोधित संस्करण है. इसे W3C द्वारा 1999 में प्रकाशित किया गया था. आज लगभग वेबसाइट इसी संस्करण में बनी हुई है.

HTML 5

HTML का सबसे नवीनतम संस्करण HTML 5 है. इसमे HTML 4.01 कि विशेषताओं के अलावा XML कि विशेषताओं को भी जोडा गया है. यह संस्करण धीरे-धीरे अपनी पहचान बना रहा है. और काफि लोकप्रिय हो चुका है.

HTML का उपयोग कहाँ और कैसे किया जाता है?

HTML का उपयोग कहाँ किया जाता है?

यह एक साधारण और बेतुका सवाल लग सकता है. मगर, इसे गहराई से सोचने पर इसकी असलियत का पता चलता है.

आप पहले ही जान चुके है कि एचटीएमएल का उपयोग वेब डॉक्युमेंट बनाने के लिए किया जाता है. मगर, यह सिर्फ वेब डॉक्युमेंट बनाने तक सीमित नहीं है.

क्योंकि HTML वेब का आधार है. इसके बिना वेब का निर्माण की कल्पना भी नहीं की जा सकती है.

HTML Document बनाने के अलावा इसका उपयोग यहाँ भी खूब किया जाता है.

· Web Page Development

· Navigation

· Game Development

· Responsive Graphics

· Web Document Formatting

हमने ये तो जान लिया है कि HTML का उपयोग (HTML Uses in Hindi) कहाँ किया जाता है.

आइए, अब जानते है इसे कैसे इस्तेमाल करते है. अर्थात HTML से वेबपेज (वेब डॉक्युमेंट) कैसे बनाते है?

एचटीएमएल से वेबपेज बनाना बहुत ही आसान है. इसे हम एक उदाहरण से समझते है.

निर्देश:-

· नीचे जो HTML Code दिया गया है. उसे हू-ब-हू कॉपी कीजिए.

· फिर इस कोड को किसी टेक्स्ट एडिटर प्रोग्राम (नोटपेड) में पेस्ट कर दीजिए.

· इसके बाद इस फाइल को .html फाइल एक्सटेंशन लगाकर सेव कर दीजिए.

· सेव करने के बाद इस फाइल को किसी भी ब्राउजर में ओपन करें.

· आपका वेबपेज तैयार हो गया है.

HTML Example:

<!DOCTYPE HTML>

<HTML>

<TITLE>My First HTML Document</TITLE>

</HEADER>

<BODY>

<H1>This is Heading of Document</H1>

<P>This is first paragraph of this document.</P>

<P>This is second paragraph of this document. You can add as many paragraphs as possible like this.</P>

</BODY>

</HTML>

HTML कैसे सीखें – How to Learn HTML in Hindi?

इस वेब प्रोग्रामिंग भाषा HTML को सीखना बहुत ही आसान है. आप कुछ ही घंटों की ट्रैनिंग से अपना खुद का वेब डॉक्युमेंट बनाने में कामयाब हो जाते है.

नीचे हम एचटीएमएल सीखने के अलग-अलग तरीके बता रहे है. जिनके द्वारा आप खुद घर बैठे HTML सीख सकेंगे.

1. ऑनलाइन सीखें

2. वेब डिजाइनिंग कोर्स जॉइन करें

3. किताबें खरिदें

4. ऑफलाइन ट्युटोरिंग लें

5. यूट्यूब से सीखें

#1 ऑनलाइन सीखें

आजकल डिजिटल शिक्षा का बोलबाला है. इसलिए, आप अपने हिसाब से किसी ऑनलाइन सोर्स से Free HTML Training लें सकते है.

इंटरनेट पर सैकड़ों साइट मौजूद है. जो एचटीएचएल की फ्री ट्रैनिंग दे रहें है. नीचे कुछ लोकप्रिय वेब पोर्टल का नाम दिया जा रहा है. जहाँ से आप फ्री में एचटीएमएल सीख सकते हैं.

· W3Schools.com

· Udemy.com

#2 वेब डिजाइनिंग कोर्स जॉइन करें

यदि आप ऑनलाइन नही सीख सकते है. और आपको परंपरागत शिक्षा प्रणाली ही अच्छी लगती है. तो आप किसी भी नजदीकि इंस्टीट्युट में जाकर वेब डिजाइनिंग कोर्स में एडमिशन लें सकते है.

इस कोर्स में आपको HTML के साथ अन्य वेब तकनिकों जैसे सीएसएस एवं जावा स्क्रिप्ट की ट्रैनिंग भी साथ में उपलब्ध करवाई जाती है.

इसलिए, आप अपने बजट और इंस्टीट्युट की साख को मद्दे नजर रखते हुए. उसका चयन करें और एडमिशन लेकर ट्रैनिंग शुरु करें.

इस ट्रैनिंग के दौरान आपको लाइव प्रोजेक्ट्स पर काम करने का अनुभव मिलता है और पढ़ाई पूरी होने के बाद सर्टिफिकेट भी दिया जाता है. जो आपकी योग्यता को साबित करने के लिए एक अनिवार्य दस्तावेज होता है.

#3 किताबें खरिदें

किसी भी स्किल को सीखने का आधार किताबें होती है. इनके द्वारा हम लेखक से आभासी रूप में जुड़े रहते है. और उनके ज्ञान का सीधा लाभ लेते है.

इसलिए, आप सेल्फ लर्निंग और सैध्दातिंक ज्ञान के लिए Best HTML Books बाजार से खरीदकर खुद उदाहरणों के जरिए सीखना शुरु करें.

हमें पूरा विश्वास है. यदि आप किताब में दिए गए निर्देशों का पालन यथावत करते है तो आप 100% वेबपेज बनाना सीख लेंगे.

#4 ऑफलाइन ट्युटोरिंग लें

वैसे यह भी कोर्स जॉइन करने के जैसा ही है. मगर, फर्क बस इतना है कि यहाँ आप को कोर्स वगैरह में एडमिशन नही लेते है. केवल, पड़ोस के HTML Master से ट्रैनिंग लेते है.

इस ट्रैनिंग का फायदा किसी इंस्टीट्युट ट्रैनिंग से ज्यादा मिलता है. क्योंकि आप सीखने वाले केवल आप होते है. और आपको काम करने का अनुभव भी मिलता है.

क्योंकि, इस तरह की ट्युटोरिंग देने वाले अधिकतर ट्युटर फ्रीलांसर होते है. और फ्रीलांसिंग करके अपना गुजारा चलाते है. इसलिए, इनके पास कई-कई प्रोजेक्ट्स होते है.

#5 यूट्यूब से सीखें

आजकल यूट्यूब सीखने का नया प्लैटफॉर्म उभर रहा है. खासकर भारत देश में तो इसका क्रेज कुछ ज्यादा ही दिखाई पड़ता है.

चुंकि, यूट्यूब की पढ़ाई मुफ्त है. इसलिए, स्टुडेंट्स इसे प्राथमिकता देते है.

मगर, यूट्यूब पर उपलब्ध HTML Videos को हम क्वालिटी के लिहाज से ज्यादा महत्वपूर्ण नहीं मान सकते है. और ना ही विश्वसनीय सोर्स से इस प्रकार से वीडियो बनाए जाते है. इसलिए, यूट्यूब लर्निंग को हमेशा शक की दृष्टि से देखा जाता है. और इसे कम विश्वसनीय मानते है. बाकि फैंसला आपको करना है.

आपने क्या सीखा?

इस लेख में आपने जाना कि HTML क्या होती है, HTML फुल फॉर्म क्या है? साथ ही आपने जाना कि HTML का उपयोग कैसे और कहाँ होता है? और HTML कैसे सीखते है?

हमे उम्मीद है कि यह लेख आपके लिए उपयोगी साबित होगा. यदि आपको एचटीएमएल से संबंधित कोई भी सवाल या विचार है तो उसे आप कमेंट के माध्यम से पूछ सकते है.

#BeDigital

Webpage क्या है और एक वेबपेज कैसे बनाये हिंदी में जानकारी

क्या आप जानते है अभी आप एक Webpage (वेबपेज) को ही पढ रहे है. चौंकिए मत ये सच है! आप एक HTML Document को ही पढ रहे है. और थोडी ही देर में जान जाऐंगे कि एक वेबपेज क्या है? एक HTML Document क्या होता है?

इस लेख में हम आपको वेबपेज के बारे में पूरी जानकारी दें रहे है. आपको इस लेख में एक वेबपेज क्या है? (What is a Webpage in Hindi?), वेबपेज की परिभाषा, वेबपेज के प्रकार, वेबपजे कैसे बनाते है? आदि सवालों के जवाब मिल जाऐंगे.

इसके अलावा हम आपको एक वेबपेज और वेबसाइट में अंतर के बारे में भी जानकारी देंगे. समझने में सहायता के लिए इस लेख के प्रत्येक भाग को अलग-अलग बांट दिया है.

Table of Content

1. वेबपेज क्या होता है?

2. वेबपेज के विभिन्न प्रकार

3. वेबपेज और वेबसाइट में अंतर

4. वेबपेज कैसे बनाते है?

5. आपने क्या सीखा?

Webpage क्या है – What is a Webpage in Hindi?

Webpage, इंटरनेट पर उपलब्ध एक HTML Document होता है, जिसे वेब ब्राउजर द्वारा पढ़ा जाता है. प्रत्येक वेबपेज का एक विशिष्ट वेबपता होता है जिसके जरिए इसे कोई भी व्यक्ति एक्सेस कर सकता है. वेबपेज में साधारण टेक्स्ट के साथ ग्राफिक्स, वीडियो, ओडियो, हाइपरलिंक्स तथा अन्य सामग्री समाहित होती है.

वेबपेज को HTML Document भी कहते है क्योंकि वेबपेज को मुख्यत: HTML में ही लिखा जाता है. HTML भाषा के अलावा इन्हे अन्य प्रोग्रामिंग भाषाओं में भी लिखा जाता है.

इन वेबपेजों को ऑनलाइन स्टोर करने के लिए वेब सर्वरों का उपयोग होता है. ये वेब सर्वर हमेशा इंटरनेट से कनेक्ट रहते है. इसलिए, इनमे उपलब्ध जानकारी 24×7 एक्सेस की जा सकती है.

किसी एक टॉपिक पर मौजूद सभी वेबपेजों को वेबमास्टर्स (वेबपेज लिखने वाले) एक ही सर्वर पर रख लेते है. और इस वेब सर्वर को एक नाम दे दिया जाता है. जिसे आम भाषा में वेबसाइट कहते है.

जैसे; teachask.com ऑनलाइन ट्युटोरियल्स के वेपबेजों का कलेक्शन है. इसलिए, हमने हमारे सर्वर का नाम teachask .com रखा है.

दुनिया का पहला वेबपेज किसने और कब बनाया?

दुनिया का पहला वेबपेज अथवा HTML Document माननीय Sir Tim Berners Lee द्वारा सन 1991 में बनाया गया था. पहले वेबपेज को लिखने के लिए HTML भाषा का उपयोग किया गया था. और आज भी इस भाषा का उपयोग सबसे ज्यादा किया जाता है. इस बारे में ज्यादा जानकारी के लिए आप इस वेबपेज पर जाएं –

वेबपेज कैसे ओपन करते हैं – How to Open a Webpage in Hindi?

· स्टेप: #1 – एक ब्राउजर ओपन कर लिजिए

· स्टेप: #2 – ब्राउजर की सर्च बार में URL टाइप कीजिए

· स्टेप: #3 – टाइप करने के बाद एंटर या ओके दबाएं

· स्टेप: #4 – वेबपेज देंखे

आइए, अब इसे प्रोसेस को विस्तार से समझते है. और जानते है कैसे आप एक वेबपेज को ओपन कर सकते है.

Step: #1 – ब्राउजर ओपन करें

सबसे पहले एक ब्राउजर ओपन कर लिजिए. यह प्रोग्राम आपके कम्प्यूटर और स्मार्टफोन दोनों के साथ फ्री आता है. जैसे; गूगल क्रोम ब्राउजर, इंटरनेट एक्सप्लोरर आदि.

Step: #2 – ब्राउजर की सर्च बार में URL टाइप कीजिए

आपको याद हो तो हमने ऊपर बताया था कि प्रत्येक वेबपेज का एक विशिष्ट वेबपता होता है. इसे ही URL (Uniform Resource Locator) कहते है.

आप जिस वेबपेज को ओपन करना चाहते है उसका वेबपता ब्राउजर की सर्च बार में टाइप करना है. समझने के लिए आप http://teachask.blogspot.com टाइप करें.

Step: #3 – एंटर या ओके दबाएं

एड्रेस टाइप करने के बाद सर्च करने के लिए एंटर या फिर ओके बटन दबाएं. ऐसा करते ही ब्राउजर इस वेबपेज को इंटरनेट पर ढूँढ़ना शुरु कर देगा और कुछ ही सैकण्ड में आपके सामने इस यूआरएल से जुड़ा वेबपेज सामने होगा.

Step: #4 – वेबपेज देंखे

आपके सामने वेबपेज खुल चुका है. इस वेबपजे में मौजूद जानकारी को देंखे, समझे और समझ ना आए तो कमेंट करके वेबमास्टर से पूछे.

तो इस तरह आप एक वेबपेज को अपने कम्प्यूटर या मोबाइल फोन में ओपन कर सकते है.

अब आपके मन में एक सवाल आ रहा होगा कि मुझे वेबपेज का यूआरएल कैसे पता चलेगा. इंटरनेट पर तो करोड़ों वेबपेज मौजूद है?

आपने सही सवाल पूछा है और यह समस्या वेब निर्माताओं ने समझ ली थी. इसलिए, इसका समाधान निकाला – सर्च इंजन.

सर्च इंजन एक ऐसी वेबसाइट होती है जो इंटरनेट पर मौजूद वेबपेजों को इकट्ठा करके अपने डेटाबेस में टॉपिक अनुसार छांटकर रखती है. और यूजर्स के लिए इन वेबपेजों को ढूंढ़ने के लिए सर्च टूल मुहैया कराती है.

गूगल सर्च इंजन, बिंग सर्च इंजन, याहू सर्च इंजन आदि वेबसाइटों का यहीं काम है. और आप इस वेबपेज को गूगल के द्वारा ढूँढ़्कर ही पहुँचे है.

इस बारे में अधिक जानकारी के लिए आप हमारे इंटरनेट से जानकारी कैसे सर्च करते है. इस गाइड को पढ़ सकते है. यहां पर हमने सर्च इंजनों द्वारा मन पसंद जानकारी ढूँढ़ने के बारे में बताया हुआ है.

वेबपेज के विभिन्न प्रकार – Types of Webpage in Hindi

Webpage की प्रकृति और बनावट को समझने के लिए वेबपेज के दो प्रकार बताए गए है.

1. Static Webpage

2. Dynamic Webpage

1.Static Webpage

एक Static Webpage जिसे Flat Page भी कहा जाता है, एक साधारण HTML Document होता है. Static Webpage को केवल HTML और CSS से ही बनाया जाता है.

आप एक Static Webpage की तुलना Newspaper और Magazine Article से कर सकते है. इस तरह के वेबपेज में User यानि कि हम कोई परिवर्तन नही कर सकते है. इसे केवल Webmaster ही Change कर सकता है.

इन वेबपेजों में मौजूद जानकारी भी बहुत लंबे समय तक एक जैसी ही बनी रहती है. बहुत ही कम अपडेट होती है.

एक स्टैटिक वेबपेज का फाइल एक्सटेंशन .html, .htm होता है. चैक करने के लिए अपने ब्राउजर की सर्च बार देखिए और इस वेबपेज का यूआरएल देखिए क्या लिखा हुआ है.

2. Dynamic Webpage

एक Dynamic Webpage बिल्कुल Static Webpage के विपरीत होता है. यह वेबपेज समय के अनुसार बदलता रहता है. जैसे एक News Site पर हमेशा Current Time की News पहले दिखाई जाती जाती है और अन्य खबरें बाद में दिखाई देती है.

Dynamic Webpages को बनाने के लिए जिस तकनीक का उपयोग किया जाता है, उसे सामुहिक रूप में DHTML नाम दिया गया है. DHTML की Full Form Dynamic Hypertext Markup Language है.

इन वेबपेजों पर वेबमास्टर के अलावा आप और हम भी जानकारी जोड़ सकते है. इसलिए, वेबपेज जल्दी-जल्दी अपडेट होते रहते है.

ड्यानामिक वेबपेजों को स्क्रिप्ट द्वारा लिखा जाता है. इसलिए, इनका फाइल एक्सटेंशन .php, .cgi, .pl, .asp होता है. यह केवल कुछ ही नाम है यह संखा दर्जनों हो सकती है.

वेबपेज और वेबसाइट में अंतर – Difference between a Webpage and Website in Hindi

एक वेबसाइट और वेबपेज में क्या अंतर होता है?

यह सवाल एक साधारण इंटरनेट यूजर को हमेशा ही Confused करता है. और इस उलझन के कारण कुछ लोग वेबपेज और वेबसाइट दोनों को एक ही चीज समझने लगते है.

लेकिन, हम आपको बताना चाहेंगे कि वेबसाइट और वेबपेज दोनों एक ही सिक्के के दो पहलु है. और दोनों एक दूसरे से परस्पर (Interconnected) जुडे हुए है.

वेबपेज और वेबसाइट में अंतर

	वेबपेज	वेबसाइट
	वेबपेज एक HTML Document होता है.	वेबसाइट, ऐसे वेबपजों का समूह होता है.
	वेबपेज को फ्री बनाया जा सकता है.	जबकी एक वेबसाइट को बनाने के लिए पैसा चुकाना पड़ता है. तब जाकर एक लाइव वेबसाइट ऑनलाइन रह पाती है.
	वेबपेज बनाने के लिए किसी वेबसाइट की जरूरत नहीं पड़ती है.	लेकिन, एक वेबसाइट को बनाने के लिए बहुत सारे वेबपेजों की आवश्यकता पड़ती है.
	वेबपेज को साधारण नोटपेड से ही बनाया जा सकता है.	जबकि, एक वेबसाइट को बनाने के लिए विभिन्न टूल्स की जरूरत पड़ती है.
	वेबपेज बनाने के लिए ज्यादा एडवांस जानकारी की जरूरत नहीं पड़ती है.	अगर, आप एक वेबसाइट बनाएंगे तो आपको विभिन्न वेब टेक्नोलॉजी की जानकारी होनी जरूरी है.

Webpage कैसे बनाये – How to Create a Webpage?

एक वेबपेज को बनाना बहुत आसान है आप खुद अपने लिए एक वेबपेज बना सकते है. एक वेबपेज को बनाने के लिए आपको HTML, Web Browser और एक Text Editor जैसे, Notepad की जरूरत पडेगी.

और एक सामान्य Computer में वेब ब्राउजर और एक Text Editor तो Install रहते है. और HTML Coding आपको सीखनी पडती है.

रही बात एक वेबपेज बनाने की तो यह एक Technical Work है. जिसके लिए आपको थोडा Technical Knowledge होना जरूरी है.

इसलिए हमने यहाँ वेबपेज बनाने के बारे मे जानकारी नही दी है. हमने एक वेबपेज कैसे बनाये? नाम से एक अलग Tutorial लिखा है. आप यहाँ जाकर वेबपेज को बनाने के बारे में पूरी जानकारी ले सकते है.

आपने क्या सीखा?

इस लेख में हमने आपको वेबपेज के बारे में पूरी जानकारी दी है. आपने जाना कि एक वेबपेज क्या होता है? वेबपेज के प्रकार, वेबपेज कैसे बनता है?

इसके अलावा आपने एक वेबपेज और वेबसाइट में अंतर के बारे में भी जाना है. हमे उम्मीद है कि यह लेख आपको पसंद आएगा और आपके लिए उपयोगी साबित होगा.

यदि आपको वेबपेज के बारे में कुछ भी Confusion है तो आप Comment के माध्यम से अपनी Confusion के बारे में बता सकते है. हमे आपको जवाब देने में खुशी होगी.

इस लेख को अपने दोस्तों के साथ जरूर शेयर करें ताकि उन्हे भी वेबपेज के बारे में पूरी जानकारी मिल जाएं.

#BeDigital

HTML सीखने के लिए Right Tools and Skills की जानकारी.

HTML को सीखने के लिए आवश्यक Tools और Skills क़े बारे में जानीए.

HTML Codes लिखने के लिए और HTML से Website बनाने से पहले ये जानना जरूरी है कि आप और आपका Computer HTML Codes लिखने के लिए बिल्कुल तैयार है? क्योंकि HTML को लिखने और HTML से Website बनाने के लिए कुछ Technical Skills और Tools की जरूरत पडती है. जिनकी सहायता से HTML Codes को लिखा और देखा जाता है.

इस Lesson में हम आपको HTML Codes को लिखने के लिए आवश्यक Technical Skills और कुछ जरूरी Right Tools के बारे में ही बताऐंगे. ताकि यह पक्का हो सके कि आप और आपका कम्प्युटर HTML Codes से Webpage बनाने के लिए बिल्कुल तैयार है. इस Lesson को हमने निम्न भागों में विभाजित किया है.

Table of Content

1. HTML लिखने के लिए आवश्यक Technical Skills

o Computer Fundamentals का ज्ञान – Knowledge of Computer Fundamentals

o Keyboard की जानकारी – Knowledge of Keyboard

2. HTML लिखने के लिए जरुरी Right Tools

o Text Editor

o Web Browser

3. आपने क्या सीखा?

1. HTML लिखने के लिए आवश्यक Technical Skills

1. Computer Fundamentals का ज्ञान – Knowledge of Computer Fundamentals

HTML लिखने के लिए सबसे जरूरी है आपको Computer Fundamentals की Knowledge होनी चाहिए. इसके लिए आपको कुछ Computer Basics Functions के बारे मे अच्छी तरह से पता होना चाहिए. आपको कम्प्युटर को चालु करना, कम्प्युटर मे फोल्डर बनाना, कम्प्युटर में फाईल सेव करना, पहले से Save File को Open करना, किसी भी Computer Program को Run करना और उसे Close करना आदि Basics Tasks आना जरूरी है.

यदि आपको Computer Fundamentals की जानकारी नही है, तो आप हमारे Computer Tutorials को पढकर Computer Basics की जानकारी हिंदी में ले सकते है. क्योंकि हमारे Computer Tutorials Hindi भाषा में उपलब्ध है.

2. Keyboard की जानकारी – Knowledge of Keyboard

यदि आपको Computer Programming की जानकारी है तो आप अच्छी तरह से जानते होंगे? कि Programming Languages की Coding की जाती है. इसी तरह HTML Language की भी Coding की जाती है. इसी तरह HTML Coding को HTML Tags के माध्यम से किया जाता है. जिसके लिए हमे की-बोर्ड का उपयोग करना पडता है. इसलिए आपको कम्प्युटर की-बोर्ड की जानकारी भी होना जरूरी है.

आपको की-बोर्ड में उपलब्ध बटनों (Keys) के नाम पता होना चाहिए और Keyboard Keys का उपयोग करना भी आना जरूरी है. हमने Computer Keyboard और इसके उपयोग के बारे में एक Lesson अलग से बनाया हुआ है. आप इस Lesson को पढकर की-बोर्ड के बारे में पूरी जानकारी ले सकते है.

HTML लिखने के लिए जरुरी Right Tools

HTML के लिए जरुरी Right Tools के बारे में आपको सही जानकारी होना जरूरी है. क्योंकि कुछ लोग समझते है कि HTML Coding करने के लिए हमे बाहर से Tools खरीदने पडते है. लेकिन, ये बात बिल्कुल सही नही है. क्योंकि आपके कम्प्युटर में पहले से ही ये Tools उपलब्ध है. और आपको इनके लिए एक पैसा भी खर्च नही करना है.

तो आईए जानते है कि HTML Programing करने के लिए जरूरी Tools कौन-कौनसे है? और इन Tools का नाम क्या है? और ये Tools आपके कम्प्युटर में कहाँ उपलब्ध है?

1. Text Editor

HTML Document एक Simple Text File होती है. जिसके लिए हमें एक Simple Text Editor की जरूरत पडती है. आप इस कार्य के लिए Notepad का उपयोग कर सकते है. जो आपके Windows PC में पहले से ही Install होता है.

Notepad HTML Code लिखने के लिए एक Perfect Tool है. इसलिए आप HTML Document बनाने के लिए Notepad का उपयोग ही करें. HTML Coding के लिए Rich Text Editor जैसे MS Word का उपयोग बिल्कुल ना करें.

2. Web Browser

HTML Coding को पढने के लिए Web Browser की जरूरत पडती है. यदि आप एक HTML Document को Notepad में Open करेंगे तो आपको HTML Tags के अलावा कुछ नही दिखेगा.

इसलिए HTML Tags को समझने के लिए ब्राउजर का उपयोग किया जाता है. एक इंटरनेट ब्राउजर HTML Tags को समझता है और उसके अर्थ को हमे दिखाता है. जैसे हम HTML Document में Heading लिखना चाहता है. तो इसके लिए हम HTML Heading Tags का उपयोग करते है. Browser इस HTML Heading Tags को पढता है और इसे समझता है. इसके बाद हमे Heading दिखाता है.

आपके कम्प्युटर में पहले से ही एक सुरक्षित और उपयोगी ब्राउजर Install रहता है. जिसका नाम Internet Explore है. इसे सिर्फ IE के नाम से भी जानते है. आप इसके अलावा Google Chrome या फिर Mozilla Firefox का भी इस्तेमाल कर सकते है.

आपने क्या सीखा?

इस Lesson में आपने जाना कि HTML Codes को लिखने के लिए जरूरी Technical Skills और आवश्यक Right Tools कौन-कौनसे है? हमें उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा. यदि आपके पास इस Lesson से संबंधित कोई विचार है तो आप हमें Comment के माध्यम से बता सकते है.

Basic HTML Web Page Structure in Hindi.

HTML Document के Basic Structure की पूरी जानकारी.

HTML Document या एक HTML Page का निर्माण HTML Elements और HTML Tags से होता है. HTML Page को आप Webpage के नाम से भी जानते है.

एक अखबार (Newspaper) या पत्रिका लेख (Magazine Article) की बनावट के अनुरूप ही एक HTML Page का Structure होता है. एक सामान्य पत्रिका लेख में Headings (शीर्षक), Paragraphs, Sub-headings (उपशीर्षक) आदि होते है. ठीक यही चीजे एक Basic HTML Document में भी होती है.

एक HTML Document में भी शीर्षक, Paragraphs तो होते ही है. इनके अलावा भी कई और चीजे एक HTML Page में होती है. जिनके बारे में नीचे बताया जा रहा है.

Table of Content

1. HTML Page Structure

o The Doctype Element

o The html Element

o The head Element

o The body Element

2. आपने क्या सीखा?

HTML Web Page Basic Structure

एक Basic HTML Document Structure चार चीजों से मिलकर बनता है. जिन्हें आप नीचे Image में देख सकते है.

1. The Doctype Element

2. The html Element

3. The head Element

4. The body Element

ये चार चीजे या यूँ कहे कि चार HTML Tag एक HTML Document का ढाँचा या कंकाल (Skeleton) बनाते है. इस HTML Page के कंकाल के ऊपर हमारा सारा कार्य निर्भर रहता है. ये चार HTML Tags एक HTML Page Structure में शामिल होते है. आईए अब प्रत्येक HTML Tag के बारे में जानकारी लेते है.

1. The Doctype Element

DOCTYPE Element का पूरा नाम Document Type Definition है. इस Tag से हमे Document Type और HTML Version इन दो चीजों के बारे में जानकारी मिलती है.

Document Type Computer को बताता है कि यह एक HTML Document है. और HTML Version से हमे HTML Version की जानकारी मिलती है कि इस HTML Document में HTML का कौनसा Version इस्तेमाल किया गया है.

HTML Version और Document Type Declaration का उपयोग Browser द्वारा HTML Page को सही तरह और पूरी तरह समझने के लिये किया जाता है. इसलिए Doctype Declaration को हमे HTML Page बनाते समय जरूर लिखना चाहिए.

2. The html Element

Doctype Declaration के तुरंत बाद Opening <html> Tag को लिखा जाता है. HTML Element HTML Page का Root Element होता है. Opening HTML Tag <html> और Closing HTML Tag </html> के बीच में ही अन्य HTML Tags को लिखा जाता है.

3. The head Element

Head Element के द्वारा HTML Document के Head Part को Define किया जाता है. इस Element की HTML Page में महत्वपूर्ण भूमिका होती है.

Head Element का उपयोग Browsers और Search Engines को HTML Document यानि Webpage के बारे में सूचना (Information) देने के लिए किया जाता है.

HTML के Head Element में एक Title element लिखा जाता है. Title Tag के द्वारा HTML Document का Title लिखा जाता है. Document Title Browser Window और SERPs यानि Search Engine Result Pages में दिखाई देता है.

Title के अलावा एक Webpage के बारे में अतिरिक्त जानकारी Meta Tag द्वारा लिखि जाती है. इस जानकारी में Page Description, Keywords, Page Authorship Information, Author Name, Character Encoding, Browser Instruction आदि शामिल है. इस जानकारी को सामूहिक रुप में Meta Data कहा जाता है. Meta Data Users के लिए उपलब्ध नही रहता है. क्योंकि यह जानकारी Actual Content का हिस्सा नही होती है.

कुछ External Resources जैसे JavaScript, External StyleSheets भी Head Element में ही जोडी जाती है. External Page Resources को HTML Document में जोडने के लिए Link Tag का उपयोग किया जाता है.

4. The body Element

आपको जो हिस्सा इस Lesson में दिखाई दे रहा है. वो सभी Body Element के भीतर ही लिखा गया है. अर्थात एक Webpage का जो भाग हमें Browser Window में दिखाई देता है. वो सबकुछ Body Tag में लिखा जाता है.

Body Tag एक HTML Document का Main Container होता है. Page Headings, Paragraphs, Sub-headings को Body Element के भीतर ही लिखा जाता है. Graphics, Multimedia Files, या अन्य कोई भी जानकारी जो आप User को दिखाना चाहते है. इसी Element के अंदर लिखी जाती है.

आपने क्या सीखा?

इस Lesson में हमने आपको HTML Page Structure के बारे में पूरी जानकारी दी है. आपने जाना कि एक HTML Page Structure को बनाने के लिए चार HTML Tags का उपयोग किया जाता है. जिनमें DOCTYPE, HTML Element, Head Element और Body Element शामिल है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा. और आपको HTML Page Structure को समझने में मददगार साबित होगा.

Write Your First HTML Document in Hindi.

HTML से अपना पहला Web Page बनाना

HTML से Webpage बनाना बहुत ही आसान है. आप सिर्फ Basic HTML Tags का उपयोग करके Webpage Create कर सकते है. Webpage के साथ-साथ HTML से Website बनाना भी सरल है.

इस Tutorial में हम आपको HTML से Webpage बनाने की पूरी जानकारी देंगे. आप हमारे साथ HTML से अपना पहला HTML Document Create करेंगे.

Table of Content

1. HTML से Webpage बनाने का तरीका

o एक Text Editor Open कीजिए

o HTML Code लिखिए

o HTML File को Save कीजिए

o HTML File को Browser में Open कीजिए

2. आपने क्या सीखा?

HTML से First Webpage बनाने का तरीका

Step: 1 एक Text Editor Open कीजिए

अपना First HTML Webpage बनाने के लिए सबसे पहले तो एक Simple Text Editor को Open कीजिए. इसके लिए आप Notepad का उपयोग कर सकते है. Notepad शुरुआत करने के लिए सबसे अच्छा टूल है.

Step: 2 HTML Code लिखिए

Notepad को Open करने के बाद आपको इसमें कुछ HTML लिखनी है. आप नीचे लिखे HTML Program को अपने नोटपैड में Copy कर सकते है. या फिर इस HTML Program को Keyboard की मदद से लिख सकते है.

इस Example में हमने एक HTML Document के सामान्य Structure में काम आने वाले Tags को Use किया है. आप एक HTML Document Skeleton के बारे में अधिक जानकारी के लिए हमारे इस Lesson को पढ सकते है. इस Lesson का URL नीचे दिया गया है.

<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1><p>My first paragraph.</p>

</body>
</html>

Example को समझिए

1. <!DOCTYPE html> HTML Tag Document को Define करता है.

2. <html> Tag एक HTML Document का मुख्य Tag होता है. जिसके अंदर सारी HTML को लिखा जाता है.

3. <body> Tag में एक HTML Document का Visible Part लिखा जाता है. जो हिस्सा हमे एक Webpage में दिखाई देता है. उसे Body Tag के अंदर ही लिखा जाता है.

4. <h1> Tag का उपयोग Heading बनाने के लिए किया जाता है. HTML में h1 से h6 तक की Heading होती है.

5. <p> Tag का उपयोग HTML Document में Paragraph लिखने के लिए किया जाता है.

Step: 3 HTML File को Save कीजिए

ऊपर जो आपने HTML लिखि है. उसको अब अपने Computer में Save कीजिए. HTML File को Save करना इतना ही आसान है जितना कि अन्य फाईल को Save करना. यदि आपको HTML File को Save करना नही आता है. तो आप नीचे बताए गए Tutorial को जरूर पढीए. इस Tutorial में हमने एक HTML Document को ठीक प्रकार से Save करने के बारे में बताया है.

HTML File को Save करने के लिए File पर जाए. इसके बाद Save पर जाए. या फिर की-बोर्ड सेे Ctrl + S दबाएं. अब आपके सामने एक SaveAs Dialog Box खुलेगा. यहाँ अपनी फाईल का नाम लिखे. नीचे चित्र देंखे. जैसे; firstwebpage.html, Encoding में UTF-8 चुने. और इसके बाद Save बटन पर क्लिक कीजिए.

Note: HTML File Name में .html जरूर लिखें. .html HTML Document का File Extension होता है.

Step: 4 HTML File को Browser में Open कीजिए

अब आपका First HTML Document बिल्कुल तैयार हो चुका है. अब HTML Codes से बने वेबपेज को देखना है. इसके लिए हमे अपनी Saved File को Open करना है. फाईल को खोलने के लिए इसके ऊपर माऊस से डबल क्लिक कीजिए. आपकी फाईल आपके Default Browser में Open हो जाएगी. जो आपको कुछ इस प्रकार की दिख रही होगी.

आपने क्या सीखा?

इस Tutorial में हमने आपको HTML से Webpage/Website बनाना सिखाया है. आपने इस Tutorial द्वारा अपना पहला Webpage बनाया है. हमे उम्मीद है कि यह Tutorial आपके लिए उपयोगी साबित होगा. यदि आपको अपना First HTML Webpage Create करने में कोई भी परेशानी आए तो आप हमे Comment के माध्यम से बता सकते है.

HTML Document को Save कैसे करें?

एक HTML Document को Save करने की पूरी जानकारी

एक HTML Document को Save करना उतना ही आसान है जितना कि एक Simple Text Document को Save करना. आप कुछ ही मिनटों में एक Simple Text File को एक HTML Document में Change कर लेंगे.

क्योंकि Save करने से पहले HTML Codes भी Simple Text मात्र ही है. जब आप इन HTML Codes को अपने कम्प्युटर में Save करते है. तब यह HTML Code एक HTML Document बन जाते है. तो आइए जानते है इस HTML Document को Save कैसे करें?

Table of Content

1. HTML Document को Save करने से पहले ध्यान रखने योग्य कुछ बातें

2. HTML Document को Save करने का तरीका

3. आपने क्या सीखा?

HTML Document को Save करने से पहले ध्यान रखने योग्य कुछ बातें

1. HTML Document के File Name में Space का उपयोग बिल्कुल ना करें. सभी अक्षरों को एक साथ मिलाकर ही लिखें. जैसे, firstfile.html और myfile.html आप भी इसी तरह File Name लिखें.

2. हमेशा Small Letters का उपयोग करें. File Name में Capital Letters का भी उपयोग ना ही करें. हो सके तो Capital Letters को File Name में शामिल ना करने की कोशिश करें.

3. File Name में Special Characters (जैसे, $ # % @ आदि) का उपयोग भी ना करें. आप File Name को ज्यादा पठनीय (Readable) बनाने के लिए Hypen अथवा Dash (-) या फिर Underscore (_) का उपयोग कर सकते है.

4. अंतिम, लेकिन सबसे महत्वपूर्ण File Name के आगे .html जरूर लिखें. .html एक HTML Document का File Extension होता है. जो कम्प्युटर को बताता है कि यह एक HTML Document है.

HTML Document को Save करने का सही तरीका

1. सबसे पहले Menu Bar से File Menu पर क्लिक कीजिए. Menu Bar आपके Text Editor में बांए कोने में सबसे ऊपर मौजूद है.

2. File Menu से आपको Save पर क्लिक करनी है. या आप Direct Keyboard से Ctrl+S भी दबा सकते है.

3. ऐसा करने पर आपके सामने Save As Dialog Box खुलकर सामने आएगा. यहाँ से आपको तीन जरूरी कार्य करने है. जो नीचे Screenshot मे दिखाए गए है.

1. सबसे पहले अपने HTML Document को Save करने के लिए जगह का चुनाव कीजिए. यानि आप अपने कम्प्युटर में कहाँ पर अपनी HTML File को Save करना चाहते है. हम आपको सलाह देंगे कि आपको इस कार्य के लिए कम्प्युटर में नया फोल्डर बनाना चाहिए. फिलहाल Desktop आपके लिए सही विकल्प है.

2. जगह का चुनाव करने के बाद आपको HTML Document का File Name देना है. जैसे हमने first-html-page.html नाम दिया है. आप अपने हिसाब से HTML File का नाम दे सकते है. लेकिन इस File Name के आगे .html लिखना ना भूले. HTML Document को Save करते समय इस बात को हमेशा ध्यान रखें.

3. File Name देने के बाद आप Save पर क्लिक करदें. आपका HTML Document Save हो जाएगा.

आपने क्या सीखा?

इस Tutorial में हमने आपको HTML Document को Save करने का तरीका बताया है. हमे उम्मीद है कि इस Tutorial को पढने के बाद आप भी अपने HTML Document को सही तरह से Save कर पाऐंगे. यदि आपको HTML Document को Save करने में किसी भी प्रकार की दिक्कत आए तो आप हमे comment के माध्यम से बता सकते है.

HTML File को Open कैसे करें?

HTML File को Open करने की पूरी जानकारी

HTML Document को Open करना किसी अन्य File को Open करने के समान ही आसान कार्य है. आप एक HTML File को विभिन्न तरीकों से Open कर सकते है.

यदि आप HTML Document को एक Webpage के रूप में देखना चाहते है, तो आपको HTML File को Browser में Open करना चाहिए. और यदि आप एक HTML File को Edit करना चाहते है, या फिर HTML Document के Source Code को देखना चाहते है? तो आपको HTML File को Notepad में Open करना चाहिए.

इस Turorial में आप जानेंगे कि एक HTML Document को Browser में Open कैसे करें? और एक HTML Document को Notepad में कैसे Open करें? इसके अलावा आप ये भी जान पाऐंगे कि एक HTML File को Browser में कब Open करना चाहिए? और Notepad में कब Open करना चाहिए.

Table of Content

1. HTML Document को Open करने की विधियाँ

o HTML File को Browser में Open करना

o HTML File को Notepad में Open करना

2. आपने क्या सीखा?

HTML Document को Open करने की विधियाँ

जैसा हमने ऊपर बताया आप एक HTML Document को दो तरीको से Open कर सकते है.

1. HTML File को Browser में Open करना

2. HTML File को Notepad में Open करना

1. HTML File को Browser में Open करने का तरीका

1. पहले से Save HTML Document को Open करने के लिए सबसे पहले उस जगह पर जाए. जहाँ पर आपका HTML Document Saved है.

2. जब आपको HTML Document मिल जाए तो आप इस HTML File पर Mouse से Double Click (Right Click को जल्दी से दो बार दबाना) कीजिए.

3. Double Click करते ही आपका HTML Document आपके Default Browser में Open हो जाएगा. यह कुछ इस प्रकार का हो सकता है. नीचे चित्र देंखे.

4. यह कोई जरूरी नही है कि सभी HTML Document ऊपर चित्र मे दिखाए अनुसार ही हो. यह चित्र तो एक Simple HTML Document का नमूना है. जो सिर्फ सिखाने के उद्देशय से बनाया गया है. एक HTML Document इस Turorial के जैसा भी हो सकता है. जिसे आप अभी पढ रहे है.

2. HTML File को Notepad में Open करने का तरीका

ऊपर आपने एक HTML Document को Browser में Open करने का तरीका जाना है. अब हम एक HTML File को Notepad में Open करने का तरीका जानेंगे. तो आइए HTML File को Notepad में Open करते है.

1. सबसे पहले आप जिस HTML File को Notepad में Open करना चाहते है. उस File को अपने कम्प्युटर में ढूँढ ले. यानि कि जहाँ पर आपका HTML Document Save है.

2. जब आप HTML File तक पहुँच जाए. इसके बाद इस File के ऊपर Right Click दबाएं.

3. Right Click दबाने पर आपके सामने एक Menu Open होगी. जिसमें से आपको Open With और इसके बाद Notepad पर क्लिक करनी है.

4. ऐसा करने के बाद HTML File Notepad में खुल जाएगी. जिसमें आपके द्वारा लिखे गए HTML Codes दिखाई दे रहे होंगे.

आपने क्या सीखा?

इस Turorial में हमने आपको पहले से तैयार एक HTML File को Open करना बताया है. हमे उम्मीद है कि यह Turorial आपके लिए उपयोगी साबित होगा. और आप इस Turorial को पढने के बाद किसी भी HTML Document को आसानी से Open कर पाऐंगे. यदि आपको HTML Document को Open करते समय कोई भी दिक्कत आए तो आप हमे Comment के माध्यम से बता सकते है.

Webpage के HTML Source Code कैसे देंखे – View Source Code in Hindi.

Webpage के HTML Source Code देखने का तरीका

इस Website या Blog का Design कितना सुंदर और आकर्षक (Beautiful & Attractive) है. अगर इस Website के Design का Source Code मुझे पता चल जाए तो मैं भी अपने Blog का Design ऐसा ही बनाउंगा.

एक Website कैसे बनती है? Website के पीछे HTML Coding कैसे की गई है? इस Website में HTML Tags का उपयोग कैसे किया गया है? आपके मन मे भी ऐसे विचार जरूर आते होंगे?

अगर आप एक Programming Student है तो आप जरूर जानना चाहेंगे कि फंला Website की Coding या Programming कैसे की गई है? और Source Code को देखने के बाद ही आपकी जिज्ञासा शांत होगी.

तो आइए जानते है कि HTML Document के Source Code कैसे देखे जाते है? और Source Code देखने के क्या फायदे है?

Source Code देखने के तरीको के बारे में बताने से पहले हम आपको Source Code के बारे में कुछ जानकारी देना चाहेंगे. ताकि आपको Source Code की पूरी जानकारी हो जाए.

Table of Content

1. Source Code का परिचय – Introduction to Source Code.

2. क्या किसी Website के Source Code को देखना Legal कार्य है?

3. क्या View Source Code के द्वारा किसी Blog Website के संपूर्ण Coding को देखा जा सकता है?

4. किसी Website या Blog के HTML Source Code को देखने के फायदे क्या है?

5. HTML Document के Source Code देखने का तरीका

o Right Click द्वारा Source Code देखना

o Webpage के URL में “view-source” लिखकर Source Code देखना

6. Mobile Phone में Source Code देखने का तरीका

7. आपने क्या सीखा?

1. Source Code का परिचय – Introduction to Source Code

आप किसी भी Website या Blog का source Code आसानी से देख सकते है. आप इंटरनेट ब्राउजर द्वारा किसी भी Webpage का HTML Source Code देख सकते है. क्योंकि ब्राउजरों में View Source Code Feature Inbuilt रहता है. इसलिए HTML Document का Source Code View करने के लिए अलग से Tool की जरूरत नही रहती है. और ना ही इसके लिए आपको इंटरनेट की जरूरत पडती है.

जब हम किसी Webpage का HTML Source Code देखते है तो हम Result Page के Source Code देख रहे होते है. Actual Code हम नही देख पाते है.

अब आप ये सोच रहे होंगे कि Source Code View करते समय क्या संपूर्ण Source Code दिखते है या कुछ खास Code ही दिखाए जाते है?

इस सवाल का जवाब Webpage के प्रकार पर निर्भर करता है. आप एक Static Website (जो सिर्फ HTML और CSS से बनी है) की लगभग पूरी Coding को देख सकते है. और एक Dynamic Website की सिर्फ Result Page की Coding को देख सकते है. इस बारे में हमने आगे भी बताया है.

2. क्या किसी Website के Source Code को देखना Legal कार्य है?

आपको ऐसा एक भी Web Developer, Web Designer, Web Master नही मिलेगा. जिसने किसी अन्य Website के Source Code को Copy नही किया है. हर पेशेवर Programmer दूसरी Sites के Source Code को देखकर ही अपनी Skills को माझंते है.

अगर आप किसी दूसरी Website के Source Code का इस्तेमाल एक Learning Tool की तरह करते है तो यह कार्य पूरी तरह Legal और सुरक्षित है. यदि आपने Source Code को अपनी Site या Blog के Design में इस्तेमाल कर लिया तो आप एक Illegal कार्य कर रहे है. जो आपको जेल भी पहूँचा सकता है.

इसलिए आप Source Code का उपयोग सीखने के लिए करें ना कि अपने Blog में Copy Past करें. क्योंकि हमें किसी की मेहनत को चुराने का कोई हक नही है.

3. क्या View Source Code के द्वारा किसी Blog Website के संपूर्ण Coding को देखा जा सकता है?

जैसा हमने पहले भी बताया कि इस सवाल का जवाब आपकी Website के प्रकार पर निर्भर करता है. यदि आप एक Static Website के Source Code देख रहे है तो आप लगभग सारी Coding को देखने मे कामयाब हो जाए. और यदि आप एक Dynamic Website के source Code देख रहे है तो आप सिर्फ Result Page के Source Code देखने में कामयाब होंगे. Actual Coding आप नही देख पाऐंगे.

सभी Search Engines, Server Side Scripts जैसे PHP अपनी Queries को Server पर Execute करते है. और हमें Result Page Show करते है. इसलिए हम सिर्फ Result Page के source Code ही देख पाते है. Actual Code नही देख पाते है. आप Search Engines, Forums, Chats आदि सेवाओं के Source Code नही देख सकते है.

इसके अलावा External Style Sheet Files, External JavaScrip आदि के Code भी आप नही देख सकते है. क्योंकि इनकी Coding File मुख्य Webpage से HTML Link Tag द्वारा जुडी रहती है. इन Files के Code मुख्य File में नही लिखे रहते है. इसलिए हम इन्हे नही देख पाते है.

4. किसी Website या Blog के HTML Source Code को देखने के फायदे क्या है?

Source Code देखने के कई फायदे है. दूसरी Sites के Code नजर डालने पर हमें Code Placement के बारे मे जानकारी मिलती है. आप अपनी खुद की Website की Programming सही तरह से कर पाते है. इन फायदों के अलावा भी कई और भी फायदे होते है.

· अगर आप एक Programming Beginner है, तो Source Code आपके लिए Practical Knowledge का भंडार है. आप Source Code के जरीए Web Designing आसानी से सीख सकते है. आप Source Code को देखकर HTML Tags का सही उपयोग करना सीख सकते है. और HTML Tags के उपयोग की Practical Knowledge ले सकते है.

· Web Developer के लिए New Skills सीखने के लिए अन्य Sites के Source Code सबसे Best स्रोत है.

· Website या Blog की Quality को बनाए रखने के लिए भी Website के Source Code को देखना जरूरी होता है.

5. HTML Document के Source Code देखने का तरीका

HTML Source Code देखने के कई अलग-अलग तरीके है. इस Lesson में हम आपको दो सरल तरीकों से Source Code देखने के बारे में बताऐंगे.

1. Right Click द्वारा Source Code देखना

2. Webpage के URL में “view-source” लिखकर Source Code देखना

Right Click Menu द्वारा Source Code देखने का तरीका बहुत आसान है. आप सिर्फ कुछ आसान से Steps को Follow करके किसी भी Webpage का HTML Source Code देख सकते है. तो आइए Right Click द्वारा Source Code को देखते है.

1. सबसे पहले ब्राउजर को Open कीजिए. हमने यहाँ Firefox Browser का उपयोग किया है. आप अपनी पसंद के अनुसार किसी भी वेब ब्राउजर का उपयोग कर सकते है.

2. अब आप जिस वेबसाईट या ब्लॉग का Source Code देखना चाहते है. उसे ब्राउजर में Open कीजिए. आप चाहे तो आपके द्वारा बनाए गए किसी HTML Document को Open कर सकते है.

3. अब आप Webpage के ऊपर Mouse की Right Click दबाएं. Right Click किसी Image या Link के ऊपर ना दबाएं. नही तो परिणाम अलग हो सकते है. इस बात का जरूर ध्यान रखें.

4. Right Click दबाने के बाद आपके सामने Right Click Menu Open होगी. यहाँ से आप View Page Source पर क्लिक कीजिए. नीचे Screenshot देखें. यह विकल्प ब्राउजर पर निर्भर करता है. इसलिए हो सकता है, आपके ब्राउजर में कुछ अलग नाम हो. जैसे फायरफॉक्स में इसे View Page Source नाम दिया गया है. Internet Explorer में इस विकल्प का नाम View Source है. अन्य ब्राउजरों में भी इससे मिलता-जुलता नाम ही होगा.

5. View Page Source पर क्लिक करते ही आपके सामने संबंधित Webpage के Source Code New Window में Open हो जाऐंगे. जो कुछ इस प्रकार के हो सकते है.नीचे Screenshot देंखे.

6. Source Code को देखकर आप जान सकते है कि Actual Webpage और Source Code Page में कितनी समानता है. आपने देखा होगा कि Actual Content कुछ HTML Tags से घिरा हुआ है. जिनके नाम से आप इन Tags के उपयोग का अंदाजा भी लगा सकते है.

अब आप Right Click द्वारा तो Source Code देखने का तरीका तो जान गए है. अब हम view-source लिखकर Source Code देखने का तरीका जानेंगे.

View-Source लिखकर Source Code देखने का तरीका

1. इस विधि में पहला और दूसरा Step तो ऊपर बताए गए तरीके के समान ही है. हम मानकर चल रहे है कि आपके सामने ब्राउजर में कोई वेबपेज खुला हुआ है. हम यहाँ भी उसी डॉक्युमेंट का उपयोग कर रहे है. जिसका Use हमने ऊपर किया है.

2. अब आप ब्राउजर की Address Bar में Webpage के URL के पीछे view-source लिखिए और Enter दबाएं. नीचे Screenshot देंखे.

3. Enter दबाते ही आपके सामने New Browser Window में Webpage के Source Code खुल जाऐंगे.

6. Mobile Phone में Source Code देखने का तरीका

यदि आप एक मोबाईल फोन में Webpage के HTML Source Code देखना चाहते है. तो आप Chrome Browser के Mobile Version में Source Code आसानी से देख सकते है.

Android Mobile में Source Code देखने के लिए आपको ऊपर बताए गए तरीको में से दूसरा तरीका आजमाना पडेगा. आप Chrome Browser की Address Bar में Webpage के URL के पीछे view-source लिखिए. और Search के Icon या फिर Go पर Tap कीजिए. आप चाहे तो Page को Refresh भी कर सकते है. जो भी आपको Suitable लगे वो आप कीजिए. आपके सामने Source Code खुल जाऐंगे.

HTML Tags in Hindi की पूरी जानकारी.

HTML Document को HTML Tags द्वारा ही Define किया जाता है. एक HTML File का निर्माण HTML Tags से ही होता है.

अब आप यही सोच रहे होंगे कि ये HTML Tag क्या होता है – What is an HTML Tag? HTML Tags कितने प्रकार के होते है – Types of HTML Tags? HTML Tags को एक HTML Document में किस प्रकार लिखा जाता है – How to Define an HTML Tag?

इस Lesson में हम आपको HTML Tags के बारे में पूरी जानकारी देंगे. HTML Tags को आसानी से समझने के लिए हमने इस Lesson को तीन भागों में बाँटा है.

Table of Content

1. HTML Tags का परिचय – Introduction to HTML Tags in Hindi

2. HTML Tag का Syntax – Syntax of an HTML Tag in Hindi

3. HTML Tags के विभिन्न प्रकार – Types of HTML Tag in Hindi

4. आपने क्या सीखा?

HTML Tags का परिचय – Introduction to HTML Tags

HTML Tag एक साधारण शब्द या अक्षर होता है. जो Angular Brackets (< >) से घिरा रहता है. इस प्रकार एक साधारण शब्द/अक्षर और Angular Brackets से एक HTML Tag का निर्माण होता है. नीचे कुछ उदाहरण दिए गए है. आप इन्हे पढकर आसानी से HTML Tag को समझ जाऐंगे.

Example 1

Form एक साधारण शब्द है. HTML Document में Form बनाने के लिए Form Tag का उपयोग किया जाता है. HTML Language में Form Tag बनाने के लिए Form शब्द को Less Than और Greater Than के बीच लिखने से HTML Form Tag का निर्माण होता है. जिसे इस प्रकार लिखा जाएगा.

Example 2

HTML Document में Paragraph लिखने के लिए Paragraph Tag को बनाया गया है. जिसमें Paragraph शब्द का केवल P इस्तेमाल किया गया है. जिससे Paragraph Tag का निर्माण होता है. यहाँ P अक्षर को Less Than और Greater Than के बीच लिखा गया है. Paragraph Tag को इस प्रकार लिखा जाता है.

Example 3

Text को Bold यानि गहरा करने के लिए Bold Tag का इस्तेमाल किया जाता है. Bold Tag बनाने के लिए Bold शब्द का मात्र B को Use किया जाता है. यहाँ B अक्षर को Less Than और Greater Than के बीच लिखा गया है. इसे इस प्रकार लिखा जाता है.

HTML Tag का नामकरण उनके द्वारा Define होने वाले Rules के आधार पर ही किया गया है. इसलिए Tag के नाम मात्र से ही उस Tag विशेष के उपयोग के बारे में भी आसानी से पता चल जाता है. कुछ दिन HTML Tags के साथ काम करने के बाद ही आप HTML Tags से Familiar हो जाते है.

HTML Tag को जिस Text पर Apply किया जाता है. वह Text उसी Tag के नाम से Mark हो जाता है. अर्थात <p> … </p> के बीच लिखा गया Text को Browser Paragraph के रूप में पहचानता है. इसलिए ही HTML को MarkUp Language कहा जाता है.

HTML Tag का कार्य Text को Define करना होता है. इसके बाद Interpreter (Browser का एक Feature) टैग द्वारा Define किये गये Rule को Read करता है. और Read करने के बाद Text को Rule के अनुसार Display करता है.

HTML Tag का Syntax – Syntax of an HTML Tag

एक HTML Tag के तीन भाग होते है:

1. Opening Tag

2. Text

3. Closing Tag

Opening Tag

Opening Tag को Start Tag भी कहा जाता है. Start Tag का कार्य Browser को बताना है कि अब ये Rule Define हो रहा है. ताकि ब्राउजर उस Tag को सही तरह से Read कर सके. Opening Tag को इस प्रकार लिखा जाता है.

Text या Content

Text वह जानकारी होती है; जो Webpage में लिखनी होती है. आप जो सूचना या जानकारी अपने Users को बताना चाहते है. वह Text यहाँ लिखा जाता है. Text लिखने के बाद Syntax कुछ इस प्रकार दिखाई देता है.

<Tag Name> Text

Closing Tag

Closing Tag को End Tag भी कहते है. End Tag से ब्राउजर को Opening Tag द्वारा Define Rule की समाप्ती के बारे में बताया जाता है. ये तीन Elements मिलकर एक HTML Tag का Syntax बनाते है. इन्हे एक साथ इस प्रकार लिखा जाता है. यह एक HTML Tag का पूरा Syntax है.

Closing Tag को Opening Tag से अलग बनाने के लिए Forward Slash (/) का उपयोग किया जाता है.

सभी HTML Tags का Syntax एक जैसा नही होता है. ऊपर बताया गया Syntax Paired Tags में Use किया जाता है. लेकिन, कुछ HTML Tags अकेले होते है. इन्हे Empty Tag कहते है. Empty Tag का Syntax इस प्रकार लिखा जाता है.

HTML Tag के प्रकार – Types of HTML Tags

HTML Language में विभिन्न प्रकार के Tags होते है. प्रत्येक Tag का उपयोग अलग-अलग Elements को Define करने के लिये किया जाता है. HTML Tags के दो प्रकार होते है:

1. Paired HTML Tag

2. Unpaired HTML Tag

1. Paired HTML Tags

Paired HTML Tags वे HTML Tags होते है. जिनको जोडे यानि Pair में लिखा जाता है. एक Paired Tag के दो भाग होते है. पहला Opening Part होता है. जिसे इस प्रकार लिखा जाता है.

दूसरा भाग Closing Part होता है. इस भाग को Content यानि Text के बाद लिखा जाता है. इस भाग को इस प्रकार Define किया जाता है.

</Tag Name>

HTML में अधिकतर Tag Paired Tag ही होते है. लेकिन, हर चीज की तरह इनके भी अपवाद होते है – Unpaired Tag.

2. Unpaired HTML Tag

Unpaired Tag को Singular HTML Tag भी कहा जाता है. ये Tag अकेले होते है. Singular Tag का साथी Tag नही होता है. एक Unpaired Tag में Opening Part और Closing Part को एक साथ ही लिखा जाता है. एक Singular Tag को HTML Document में इस प्रकार Define किया जाता है.

आपने क्या सीखा?

HTML Elements – Learn HTML Elements in Hindi.

HTML Elements की पूरी जानकारी

HTMl Element क्या है – What is an HTML Element? यह प्रशन हमेशा ही Confuse करता है. खासततौर पर नये-नये Programmers तो HTML Elements के बारे में Confused ही रहते है.

इसी Confusion को दूर करने के लिये हमने यह Lesson तैयार किया है. इस Lesson में हम आपको HTML Element क्या है? HTML Element और HTML Tag में अंतर क्या है – Different between HTML Tag and HTML Element? HTML Element के प्रकार – Types of HTML Elements? आदि के बारे में जानकारी देंगे.

Table of Content

1. HTML Element क्या है – What is an HTML Element?

2. HTML Tag और HTML Element में अंतर

3. Nested HTML Elements

4. Empty HTML Elements

5. आपने क्या सीखा?

HTML Element क्या है – What is an HTML Element?

HTML Element, HTML Tags और Content का Combination होता है. यानि Opening HTML Tag और Closing HTML Tag तक सबकुछ एक HTML Element ही होता है. एक Start HTML Tag, End HTML Tag और इनके बीच Content को सामुहिक रूप से HTML Element कहते है.

HTML Element को समझने के लिये हमने एक उदाहरण तैयार किया है. जिसे पढकर आप HTML Element को बेहतर समझ पायेंगे.

<!DOCTYPE html>

</body>
</html>

Example को समझिए

ऊपर दिए गए उदाहरण में कुल 4 HTML Elements है. आइए प्रत्येक HTML Element को समझते है.

1. HTML Element एक HTML Document का Root Element होता है. इस Element से Browser को पता चलता है कि यह एक HTML Document है. Opening <html> Tag, अन्य HTML Elements (Body, Heading और Paragraph), और Closing </html> Tag तीनो मिलकर HTML Element का निर्माब करती है.

2. Body Element में HTML Document का Visible Part लिखा जाता है. Opening <body> Tag, अन्य HTML Elements (Heading और Paragraph), और Closing </body> Tag से एक Body Element का निर्माण होता है.

3. Heading Element का उपयोग Heading बनाने के लिए किया जाता है. Opening <h1> Tag, Heading Text, और Closing </h1> Tag से एक Heading Element का निर्माण होता है.

4. Paragraph Element का उपयोग HTMl Document में Paragraph लिखने के लिए किया जाता है. Opening <p> Tag, Paragraph Text, और Closing </p> Tag से एक Paragraph Element का निर्माण होता है.

अब आप इस उदाहरण से HTML Element को समझ चुके है HTML Tags और HTML Elements के बीच अंतर को पढकर आप HTML Element के Concept को पूरी तरह से समझ जायेंगे.

HTML Tag और HTML Element में अंतर – Different between HTML Tag and HTML Element

बहुत लोगो द्वारा HTML Element और HTML Tag को एक दूसरे के लिये उपयोग किया जाता है. जो बिल्कुल भी सही नही है. क्योंकि HTML Tag और HTML Element दोनो एक दूसरे से भिन्न है. इन दोनों को एक दूसरे के लिये उपयोग करना सही Approach नही है. इसलिये हमने नीचे इन दोनों के बीच उपलब्ध सूक्ष्म अंतर के बारे मे बताया है. ताकि आपकी Confusion दूर हो जाए.

HTML Tag एक साधारण शब्द या अक्षर होता है, जो Angular Brackets (< >) से घिरा रहता है. इस साधारण शब्द या अक्षर को एक विशेष अर्थ Define करने के लिये Mark किया जाता है. जैसे; ऊपर की फोटो में <H1> एक Opening Heading Tag है. और </H1> एक Closing Heading Tag है.

HTML Tag के बारे मे हमने अलग से एक Lesson तैयार किया है. आप इस Lesson को पढकर HTML Tags के बारे में और ज्यादा जानकारी ले सकते है.

HTML Element का निर्माण HTML Tags से होत है. एक Element का अलग से कोई अस्तित्व नही है. एक Opening Tag, Closing Tag और इनके बीच Content को सामुहिक रूप में Element कहा जाता है. प्रत्येक HTML Tag एक HTML Element हो सकता है. और अपनी अलग पहचान रखता है.

Nested HTML Element

HTML Document की ईंट HTML Tag होता है. एक HTML Tag के बीच में अन्य HTML Tags को लिखा जा सकता है. इस प्रक्रिया को HTML Elements को Nested करना कहते है. जैसे; ऊपर उदाहरण में HTML Element के बीच में Body Element, Heading Element और Paragraph Element को लिखा गया है. यहाँ HTML Parent Element है और Body, Heading और Paragraph Child Element है.

जिस क्रम में HTML Elements को Open किया जाता है. इसके विपरीत क्रम में इनको Close किया जाता है. मतलब सबसे पहले वाला Element सबसे बाद में Close होता है. जैसे; ऊपर के ऊदाहरण में हमने क्रमश: पहले HTML Element, Body Element, Heading Element और Paragraph Element को Open किया है. लेकिन, Heading Element को सबसे पहले Close किया है. इसके बाद Paragraph को Close किया है. इसके बाद क्रमश: Body और HTML Element को Close किया गया है.

Empty HTML Element

कुछ HTML Tags का साथी Tag यानि Closing Tag नही होता है. इनका सिर्फ Opening Part या Start Tag ही होता है. इन Tags में किसी Content को नही लिखा जाता है. ऐसे HTML Element को Empty Element कहा जाता है.

Empty Element में एक Tag के दोनो भाग यानि Opening Part एवं Closing Part एक ही Tag में शामिल होते है. जैसे; hr एक Empty Element है. जिसका उपयोग Document के End में एक Horizontal Line (आडि रेखा) लिखने के लिये किया जाता है. इस Tag को सही रूप में इस तरह लिखा जाता है – <br />.

सबसे पहले इस Tag को भी Opening Tag कि तरह ही Open किया जाता है. फिर इस Tag को Close करने के लिये एक Space देकर Forward Slash लगा दिया जाता है. इस तरह एक ही Tag के भीतर दोनो भाग लिख जाते है. और HTML Standard का भी उलंघन नही होता है. यह पूरी तरह नियम से ही लिखा जाता है.

आपने क्या सीखा?

इस Lesson में हमने आपको HTML Element के बारे में पूरी जानकारी दी है. आपने HTML Element क्या है? HTML Element और HTML Tag में अंतर एवं HTML Element के प्रकार के बारे में जाना है. हमे उम्मीद है कि यह Lesson आपके लिये उपयोगी साबित होगा.

HTML Attributes – Learn HTML Attributes in Hindi.

HTML Attributes क्या हैं? HTML Attributes की पूरी जानकारी.

HTML Tags से आप एक Simple HTML Document Create कर सकते है. इस Simple HTML Document का White Background और Text का Color Black होता है. यह एक Black and White HTML Page होता है.

अब खुद सोचिये कि क्या आप एक Black and White Page को Read करेंगे. क्या आपके Readers एक Webpage के साथ Engage हो पायेंगे?

नही!

कोई बात नही जहाँ समस्या होती है वहाँ समाधान भी होता है. और HTML में इस समस्या का हल है – HTML Attributes.

अब आपके मन में भी यही सवाल आ रहा होगा कि एक HTML Attribute क्या होता है? What is an HTML Attribute? HTML Attributes कितने प्रकार के होते है? Types of HTML Attributes?

इस Lesson में हम आपको HTML Attributes की पूरी जानकारी देंगे. इसके साथ ही आप HTML Attribute का Syntax भी लिखना सीखेंगे और HTML Attributes का उपयोग करने का Practical Knowledge भी आप सीखेंगे.

इस Lesson को सुविधा के लिए हमने अलग-अलग भागों में विभाजित किया है. ताकि आपको Attributes से संबंधित प्रत्येक Concept अच्छी तरह समझ आ सकें.

Table of Content

1. HTML Attributes का परिचय – Introduction to HTML Attributes in Hindi

2. HTML Attributes के विभिन्न प्रकार – Types of HTML Attributes

3. HTML Attribute का Syntax – Syntax of an HTML Attribute

4. HTML Attributes को उपयोग करने की General Guidelines

5. HTML Attribute का कार्यक्षेत्र – Scope of HTML Attributes

6. Commonly Use होने वाले HTML Attributes – Name of Some Global Attributes

7. आपने क्या सीखा?

HTML Attributes का परिचय – Introduction to HTML Attributes

कुछ HTML Tags का इस्तेमाल करत समय उनके बारे में अतिरिक्त सूचना (Addition Information) भी लिखनी पडती है. जैसे; HTML Document में Image Insert करने के लिए Image Tag का उपयोग किया जाता है. Image Tag अकेला किसी Picture को Webpage में Insert नही कर सकता है. इसके लिये Image Address या Source के बारे में Tag को बताना पडता है. इस अतिरिक्त सूचना को ही Attribute कहते है.

HTML Attributes HTML Tags के बारे में अतिरिक्त सूचना (Additional Information) Provide कराते है. HTML Attributes का उपयोग HTML Tags की विशेषताओं (Characteries) को Define करने के लिये किया जाता है.

सभी HTML Tags अपनी Default Value में Show होते है. इस Default Value को Change करने के लिये ही Attributes का इस्तेमाल किया जाता है. आप अपनी जरूरत के अनुसार किसी विशेष HTML Elements की Value को विशेष Value से बदल सकते है. आप Elements की Default Value को Attributes से Control कर सकते है.

जैसे आप अपने HTML Document में Text Color को Black Color (Default Value) को Replace कर Red Color में दिखाना चाहते है; तो आप Paragraph Tag में Style Attribute द्वारा Change कर सकते है.

HTML Attributes के प्रकार – Types of Attributes

HTML Attributes को पढने की सुविधा के लिए चार श्रेणियों में विभाजित किया गया है. Attributes की इन चार श्रेणियों के बारे में नीचे बताया जा रहा है.

1. Required Attributes

2. Optional Attributes

3. Standart Attributes

4. Event Attributes

1. Required and Optional Attributes

Required और Optional Attributes लगभग एक जैसे ही होते है. इनका इस्तेमाल किसी विशेष HTML Element या कहें कि HTML Tag को Modify करने के लिये किया जाता है. आप चित्र वाले उदाहरण से इन्हें समझ सकते है. जिसमें src Attribute एक Required Attribute है और alt एक Optional Attribute है.

2. Standard Attribute

Standard Attributes अधिकतर HTML Elements पर Apply होते है. इन्हें Global Attributes भी कहते है. आप Standard Attribute को Required एवं Optional Attributes के साथ-साथ ही इस्तेमाल कर सकते है.

3. Event Attributes

Event Attributes का उपयोग किसी खास परिस्थिति में किसी विशेष कार्य को Run कराने के लिये किया जाता है.

HTML Attribute का Syntax – Syntax of an HTML Attribute

एक HTML Attribute के दो भाग होते है. पहला Attribute Name और दूसरा Attribute Value. इनके बारे में आप Attribute के General Syntax को देखकर अधिक जान पायेंगे. नीचे चित्र देंखे.

1. Attribute Name

Attribute Name एक HTML Tag की Property होती है, जो आप इस Tag के लिये Set करना चाहते है. अर्थात Name Property एक HTML Tag में वो Change है जो आप किसी Tag में करना चाहते है. Name उस विशेषता का नाम होता है, जो विशेषता आप एक HTML Tag पर Apply करना चाहते है.

Name Property HTML Tag पर निर्भर रहती है. क्योंकि कुछ Attribute कुछ विशेष Tags पर ही Apply होते है. जैसे, src Attribute सिर्फ Image Tag पर ही Apply होता है.

Name Property को Paragraph Tag के द्वारा समझते है. <p> Element का एक Attribute होता है – Align, जिसका इस्तेमाल HTML Document में Paragraph के Alignment (दिशा) को Set करने के लिये किया जाता है.

2. Attribute Value

Attribute Value उस Name Property की Value होती है, जो आप इस Name Property के लिये Set करना चाहते है. जैसे; <p> Element के Align Attribute की तीन सभांवित Values होती है: Left, Center, और Right.

Attributes का कार्यक्षेत्र – Scope of Attributes

Attributes का कार्यक्षेत्र Tags के अनुसार तय होता है. आप जिस Tag पर Attribute इस्तेमाल करते है, उसका Effect उसी Tag तक सीमित रहता है.

इसे और अधिक समझने के लिये आपको Parent-Child Tag Concept को समझना जरूरी है. आइये इसे एक उदाहरण द्वारा समझते है.

HTML के Body Element में एक Webpage के Visible Part को लिखा जाता है. Body Element के अंदर ही अन्य जरूरी HTML Tags का उपयोग किया जाता है.

जब आप Body Tag पर किसी Attribute को Apply करते है, तो इसका Effect पूरे Document पर पडता है. जैसे; हमने Body Tag पर Style Attribute द्वारा Text Color को Blue कर दिया तो पूरे Document सभी Paragraphs और Headings का Color नीला हो जायेगा.

लेकिन, जब आप Body Element के बीच में लिखे गये Heading Tag पर Style Attribute द्वारा Text Color Green कर देते है. तो Heading में Text का Color Green Show होगा. और बाकि Tags का Color Blue ही रहेगा.

इस प्रक्रिया में हमने Body Tag (Parent Tag) की Value को Heading Tag (Child Tag) की Value से Overrid किया है.

इससे यह बात साबित होती है कि एक Specific Tag (Parent Tag) के Attribute का प्रभाव तब तक रहता है जब तक इस Attribute को किसी अन्य Tag (Child Tag) द्वारा Define नही किया जाता है.

इसे समझने के लिये हमने एक उदाहरण तैयार किया है. जिसे आप भी Try कीजिये. इससे Concept को समझने में आसानी होगी.

इस उदाहरण में हमने दो Conditions बनाई है. जिसमें पहली Condition में हमने Body Tag में Style Attribute का इस्तेमाल करके Text Color को Blue किया है. वही दूसरी Condition में हमने H1 Tag में भी Style Tag को Use करके इसका Color Green किया है. दोनों Conditions के HTML Code को हमने नीचे चित्र मे दिखाया है. आप इस कोड को अपने नोटपेड में Type करके Save कर लिजिये.

अब हम मानकर चल रहे है कि आपने ऊपर लिखे कोड को लिखकर सेव कर लिया है. जब आप इस कोड को अपने ब्राउजर में Run करेंगे तो यह कोड इस प्रकार का Output देगा. नीचे चित्र देंखे.

Commonly Use होने वाले Attributes के नाम और उपयोग

HTML में कुछ Attributes अन्य Attributes की तुलना में ज्यादा इस्तेमाल किये जाते है. ये Attributes अधिकतर Tags पर Apply किये जा सकते है. इन Commonly Use होने वाले Attributes को Global Attributes भी कहते है. Global Attributes की सूची इनके नाम और उपयोग के साथ नीचे दी जा रही है.

1. Style

Style Attribute का इस्तेमाल किसी Tag पर Inline CSS Rule Apply करने के लिये किया जाता है.

2. Href

Href Attribute द्वारा किसी Link का URL (Web Address) लिखा जाता है.

3. SRC

SRC Attribute भी Href Attribute की तरह ही कार्य करता है. इस Attribute का इस्तेमाल Image Tag में किसी Image के URL को लिखने के लिये किया जाता है.

4. Width and Height

इस Attribute द्वारा किसी विशेष Tag की Width और Height को Set किया जाता है. जैसे; आप किसी Image को इसके Original Size की जगह पर Custom Size में Show कराना चाहते है; तो आप Width and Height Attributes द्वारा Image का Custom Size Define कर सकते है.

5. ALT

ALT Attribute का इस्तेमाल एक Image के बारे Alternative Text लिखने के लिये किया जाता है. यह Text Picture के Show नही होने पर Readers को दिखाई देता है. और Search Engines इसका इस्तेमाल Image को पहचानने के लिये करते है.

6. Title

Title Attribute का इस्तेमाल एक Element के बारे में अतिरिक्त सूचना देने के लिये किया जाता है.

7. ID

ID Attribute का इस्तेमाल एक Element को Unique ID Define करने के लिये किया जाता है. एक ID सिर्फ एक ही Element पर Apply होती है. एक ID को आप एक से ज्यादा Element पर Apply नही कर सकते है इसकी जगह पर Class का Use किया जाता है.

8. Class

Class Attribute भी ID की तरह ही होता है. इसका इस्तेमाल एक Element की Class Define करने के लिये किया जाता है. आप एक ही Class को एक से ज्यादा Element पर Apply कर सकते है.

9. Lang

इस Attribute का इस्तेमाल Content की Language को Define करने के लिये किया जाता है. इस Attribute को HTML Element पर Apply किया जाता है.

आपने क्या सीखा?

इस Lesson में हमने आपको HTML Attributes के बारे में विस्तारपूर्वक समझाया है. आपने जाना कि HTML Attribute क्या होता है? HTML Attributes के कितने प्रकार होते है? HTML Attributes को कैसे Apply किया जाता है. इसके अलावा हमने आपको कुछ Commonly Use होने वाले Attributes के बारे में भी बताया है. हमे उम्मीद है कि यह Lesson आपके लिये उपयोगी साबित होगा.

All HTML Tags का नाम और सूची (HTML Tags List in Hindi)

HTML में सैंकडों Elements है. प्रत्येक HTML Elements का अपना विशेष कार्य होता है. इसलिए जैसे-जैसे Webpages में नये-नये Functions की जरूरत पडती गई वैसे-वैसे ही New HTML Tags का Development होता गया.

इस लेख में हमने लगभग All HTML Tags के नाम और उनके उपयोग के बारे में बताया है. हमने All HTML Tags की Complete List बनाई है. HTML Tags List को हमने कई Categories में बांटा है. ताकि HTML Tags को समझने में आसानी रहे.

HTML Tag List को निम्न Categories में बांटा गया है.

Table of Content

1. Complete HTML Tags List in Hindi

o Basic HTML Tags

o Formatting Tags

o Style Tags

o Image Tags

o Link Tags

o Section Tags

o List Tags

o Table Tags

o Form and Input Tags

o Script Tags

o Frame Tags

o Meta Tags

2. आपने क्या सीखा?

आइए अब प्रत्येक Category में मौजूद HTML Tags के नाम और उनके उपयोग के बारे में जानते है. शुरूआत हम Basic Tags से कर रहे है. इसके बाद प्रत्येक Category के बारे में क्रमश: बताया गया है.

Complete HTML Tags List in Hindi

#1 Basic HTML Tags

HTML Basic Tags वे Tags होते है, जो एक HTML Document की Foundation रखते है. इसलिये इन्हे Foundation Tags भी कहते है. नीचे HTML Basic Tags की List और उनके उपयोग के बारे में बताया जा रहा है.

1. <–…–> – यह Comment Tag है. Comment Element का उपयोग HTML Document में Comment Define करने के लिए किया जाता है.

2. <!DOCTYPE> – DOCTYPE Element का पूरा नाम Document Type Definition होता है. DOCTYPE Element का उपयोग Document Type को Define करने के लिए किया जाता है.

3. <HTML> – HTML Element एक HTML Document का Root Element होता है. इससे HTML Document को Define किया जाता है.

4. <Head> – Head Element द्वारा HTML Document के बारे में लिखा जाता है. यह एक Webpage का Header Section होता है. जिसमे अधिकतर Meta Information को लिखा जाता है.

5. <Title> – Title Element का उपयोग HTML Document का Title Define करने के लिए किया जाता है. Document Title हमें Browser Window में दिखाई देता है. Document Title को Head Element में लिखा जाता है.

6. <Body> – Body Element से HTML Document की Body को Define किया जाता है. Body Element में एक HTML Document का Visible Part लिखा जाता है, जो Users को दिखाई देता है.

7. <H1> to <H6> – ये Heading Elements है. Heading Element द्वारा HTML Document में Headings को Define किया जाता है. HTML में H1 से H6 Level तक Headings बना सकते है.

8. <P> – इसे Paragraph Element कहते है. इसका उपयोग HTML Document में Paragraph Define करने के लिए किया जाता है.

9. <Hr> – <hr> Element का पूरा नाम Horizontal Line है. Hr Element से HTML Document में Horizontal Line को Define किया जाता है.

10. <Br> – <br> Element का पूरा नाम Break है. Br Element का उपयोग Single Line Break देने के लिए किया जाता है. मतलब आप एक Line को अलग-अलग Line में तोडकर लिख सकते है.

#2 Formatting Tags

Formatting HTML Tags वे Tags होते है, जिनसे Document Text की Formatting की जाती है. मतलब आप Text को किस प्रकार दिखाना चाहते है. नीचे कुछ मुख्य Formatting Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

1. <abbr> – <abbr> Element का पूरा नाम Abbreviation होता है. Abbreviation Element से Abbreviation Define किया जाता है.

2. <b> – <b> Element का पूरा नाम Bold है. Bold Element से Text को Bold (गहरा) किया जाता है.

3. <big> – Big Element से Text को Normal Size से बडा करने के लिए किया जाता है.

4. <blockquote> – Blockquote Element का उपयोग Document में Text को Quote करने के लिए किया जाता है. इसका मुख्य उपयोग अन्य Source से प्राप्त Data को Quote करने के लिए होता है.

5. <center> – इसे Center Element कहते है. इससे किसी HTML Element की Center Position को Define किया जाता है.

6. <code> – Code Element से Computer Code को Define किया जाता है.

7. <del> – <del> Element का पूरा नाम Delete है. Delete Element से Document से Delete Text को Define किया जाता है.

8. <em> – <em> Element का पूरा नाम Emphasize होता है. इससे Text को Emphasized किया जाता है.

9. <font> – Font Element से Text का Font, Color और Size Define किया जाता है.

10. <i> – <i> Element का पूरा नाम Italic है. इससे Text को Italic यानि तिरछा किया जाता है.

11. <ins> – <ins> Element का पूरा नाम Insert है. Insert Element से Delete किए गए Text की जगह पर लिखे गए Text को Define किया जाता है.

12. <mark> – Mark Element से Text को Highlight किया जाता है.

13. <pre> – <pre> Element का पूरा नाम Preformat है. इस Element से Preformatted Text को Define किया जाता है.

14. <q> – <q> Element का पूरा नाम Quotation है. Quotation Element से छोटा Quotation Define किया जाता है. जैस; किसी शब्द या शब्दांश को Quote करने के लिए <q> Element का उपयोग किया जाता है.

15. <small> – Small Element से Text को Normal Size से छोटा दिखाने के लिए किया जाता है.

16. <strike> – <strike> Element का पूरा नाम Strikethrough है. Strikethrough Element से Strikethrough Text को Define किया जाता है. इससे Text के बीछ में एक Line आ जाती है.

17. <strong> – इससे Important Text को Define किया जाता है.

18. <sub> – <sub> Element का पूरा नाम Subscript होता है. <sub> Element से Text को Subscript किया जाता है.

19. <sup> – <sup< Element का पूरा नाम Suprescript है. इससे Text को Suprescript किया जाता है.

20. <u> – <u> Element का पूरा नाम Underline होता है. इस Element से Text को Underline किया जाता है. मतलब Text के नीचे एक Line आ जाती है.

#3 Style Tags

Style Tags के द्वारा एक HTML Document की Style Information को Define किया जाता है. नीचे Style Tags के बारे में बताया जा रहा है.

1. <style> – <style> Element द्वारा HTML Document में Style Information को Define किया जाता है. इसके द्वारा Text Color, Text Size, Heading Color और Size, Paragraph Size और Color को अपनी पसदांनुसार Define किया जा सकता है.

#4 Image Tags

Image Tags के द्वारा HTML Document में Image Insert करने के लिए किया जाता है. नीचे Image Tags के नाम और इनके उपयोग के बारे में बताया जा रहा है.

1. <img> – <img> Element का पूरा नाम Image होता है. इस Element द्वारा Document में Image को Define किया जाता है.

2. <map> – <map> Element से Image-Map को Define किया जाता है.

3. <area> – <area> Element से Image-Map में एक विशेष Area कोक Define किया जाता है.

#5 Link Tags

Link Tags का उपयोग HTML Document में Hyperlinks बनाने और अन्य बाहरी Documents को जोडने के लिए किया जाता है. नीचे Link Tags का नाम और उनके उपयोग के बारे में बताया जा रहा है.

1. <a> – <a> Element का पूरा नाम Anchor है. Anchor Element का उपयोग Document में Hyperlink बनाने के लिए किया जाता है.

2. <link> Link Element का उपयोग External Document को HTML Document से जोडने के लिए किया जाता है.

#6 Section Tags

Section Tags का उपयोग एक HTML Document को विभिन्न भागों में विभाजित करने के लिए किया जाता है. नीचे कुछ Section Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

1. <span> – <span> Element के द्वारा एक HTML Document में inline Sections बनाए जाते है. इसके द्वारा एक शब्द, Paragraph, Paragraphs का एक Section बना सकते है.

2. <div> – <div> Element का पूरा नाम Division है. Division Element से HTML Document में अलग-अलग Sections को Define किया जाता है.

#7 List Tags

List Tags के द्वारा HTML Document में Lists बनाई जाती है. आप Number Lists, Bullet Lists,Order Lists, Unorder Lists और Definition Lists Create कर सकते है. नीचे Lists Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

1. <ul> – <ul> Element का पूरा नाम Unorder List होता है. Unorder List Element द्वारा Bullet Lists या Unorder Lists बनाई जाती है.

2. <ol> – <ol> Element का पूरा नाम Order List होता है. Order List Element द्वारा Number या Order Lists बनाई जाती है.

3. <li> – <li> Element का पूरा नाम List Item होता है. List Item Element द्वारा एक List में लिखे जाने वाले Data को Define किया जाता है.

4. <dl> – <dl> Element का पूरा नाम Definition List होता है. Definition List Element द्वारा Definition Lists को Define किया जाता है.

5. <dt> – <dt> Element का पूरा नाम Definition Term होता है. Definition Term Element द्वारा Definition Term को Define किया जाता है.

6. <dd> – <dd> Element का पूरा नाम Definition Description होता है. Definition Description Element द्वारा Definition Terms के Description को Define किया जाता है.

#8 Table Tags

Table Tags के द्वारा HTML Document में Table Create करने के लिए किया जाता है. Table से Data को Tabular Format में Present किया जाता है. नीचे Table Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

1. <table> – <table> Element से Table को Define किया जाता है.

2. <caption> – <caption> Element का उपयोग Table Caption यानि शीर्षक Define करने के लिए किया जाता है.

3. <th> – &th;th> Element का पूरा नाम Table Header होता है. Table Header Element द्वारा Table Header यानि Cells को Define किया जाता है.

4. <tr> – <tr> Element का पूरा नाम Table Row होता है. Table Row Element द्वारा Table Row को Define किया जाता है.

5. <td> – <td> Element का पूरा नाम Table Data होता है. Table Data Element द्वारा Table Data को Define किया जाता है. यानि जो Data हम Table में लिखना चाहता है.

6. <thead> – <thead> Element का पूरा नाम Table Header होता है. Table Header Element द्वारा Header Content का Group बनाया जाता है.

7. <tbody> – <tbody> Element का पूरा नाम Table Body होता है. Table Body Element द्वारा Table के Body Content को Group किया जाता है.

8. <tfoot> – <tfoot> Element का पूरा नाम Table Footer होता है. Table Footer द्वारा Footer Content को Group किया जाता है.

#9 Forms & Input Tags

Form Tags का उपयोग एक HTML Document में अलग-अलग प्रकार के Forms बनाने के लिए किया जाता है. नीचे Form Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

1. <form> – <form> Element का उपयोग HTML Document में Form Create करने के लिए किया जाता है.

2. <input> – <input> Element का उपयोग HTML Form में विभिन्न प्रकार के Input Controls Create करने के लिए किया जाता है.

3. <textarea – <textarea> Element द्वारा Form में Text Area बनाया जाता है.

4. <button> – <button> Element से Form में Buttons बनाए जाते है.

5. <option> – <option> Element के द्वारा Drop-Down List में Options बनाने के लिए किया जाता है.

6. <optgroup> – <optgroup> Element का पूरा नाम Option Group होता है. इस Element द्वारा Drop-Down List मे एक प्रकार एक Options का एक Group बनाया जाता है.

7. <label> – <label> Element द्वारा एक Input Element के लिए Label को Define किया जाता है.

8. <fieldset> – <em> Element द्वारा Form में एक प्रकार के Elements का एक Group बनाया जाता है.

9. <legend> – <em> Element द्वारा Fieldset Element के लिए Caption या शीर्षक बनाया जाता है.

#10 Scripting or Programming Tags

Scripting Tags द्वारा एक HTML Document में कुछ Programming Codes को लिखा जाता है. नीचे Scripting Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

1. <script> – <script> Element द्वारा HTML Document में Script को Define किया जाता है.

2. <noscript> – <noscript> Element द्वारा उन ब्राउजरों के लिए वैकल्पिक (Alternet) Content को लिखा जाता है, जो Script को Support नहीं करते है. या जिन ब्राउजरों में Script को Disable कर दिया जाता है.

#11 Frame Tags

Frame Tags द्वारा एक HTML Document को कई Frames में बाँटा जा सकता है. मतलब एक Document को कई अलग-अलग Window बनाकर उनमे अलग-अलग Data Show करा सकते है. Frame का अब ज्यादा उपयोग नही किया जाता है. फिर भी जानकारी देने के लिए हमने Frame Tag के बारे में नीचे बताया है.

1. <frame> – <frame> Element के द्वारा HTML Document में Frames को Define किया जाता है.

2. <frameset> – <frameset> Element द्वारा एक Frameset को Define किया जाता है. Frameset को Frame Tag द्वारा अलग-अलग Rows और Columns में बाँटा जाता है.

3. <noframes> – <noframes> Element द्वारा उन ब्राउजरों एक लिए वैकल्पिक (Alternet) Content को लिखा जाता है, जो Frames को Support नही करते है.

4. <iframe> – <iframe> Element द्वारा HTML Document में Inline Frame को Define किया जाता है.

#12 Meta Tags

Meta Tags द्वारा एक Webpage के बारे में Information को लिखा जाता है. इस Information का उपयोग Search Engines द्वारा HTML Document के बारे में जानकारी लेने के लिए किया जाता है. नीचे मुख्य Meta Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

1. <head< – <head> Element का पूरा नाम Header होता है. Header Element द्वारा एक Document के बारे में Information को Define किया जाता है.

2. <meta> – <meta> Element द्वारा एक Document का Meta Data Define किया जाता है.

3. <base> – <base> Element का उपयोग एक Document में Related URLs के लिए एक Base URL Define करने के लिए किया जाता है.

आपने क्या सीखा?

इस लेख में हमने आपको All HTML Tags के नाम और उनके उपयोग के बारे में बताया है. हमने HTML Tags को Categories में बाँटकर उनके बारे में बताया है.

हमे उम्मीद है कि यह लेख आपको पसंद आएगा और आपके लिए उपयोगी साबित होगा. किसी भी प्रकार की शंका समाधान के लिए आप कमेंट करके पूछ सकते है.

#BeDigital

HTML Heading Element in Hindi – HTML Heading Tag.

Heading एक शब्द, शब्दांश या वाक्य होता है, जिसे किसी Document, Article, Blog Post आदि में सबसे पहले लिखा जाता है. Heading बिल्कुल Page Title के समान होती है. आप Heading की तुलना “शीर्षक” से कर सकते है.

Newspaper Article और Magazine Article की तरह Webpages और HTML Documents मे भी Headings को लिखा जाता है.

इस Lesson में हम आपको HTML Heading Tag के बारे में पूरी जानकारी देंगे. HTML Heading को समझने के लिए इस Lesson को हमने कई भागों में बांटा है. जिनके बारे में नीचे बताया जा रहा है.

Table of Content

1. HTML Heading का परिचय – Introduction to HTML Heading in Hindi

2. HTML Heading का महत्व – Importance of HTML Heading

3. HTML Heading के प्रकार – Types of HTML Heading

4. HTML Heading का उदाहरण – Example of HTML Heading

5. आपने क्या सीखा?

1. Introduction to HTML Heading in Hindi – HTML Heading का परिचय

HTML में Heading Define करने के लिए Heading Element का Use किया जाता है. Heading Element 6 Level तक Heading Support करता है. जिन्हें क्रमश: <H1> से <H6> Element द्वारा Define किया जाता है.

HTML Headings का उपयोग उनकी Importance के आधार पर किया जाता है. सबसे अधिक महत्व की Heading के लिए <h1> Level Heading का उपयोग किया जाएगा. और सबसे कम महत्व की Heading के लिए <h6> Level Heading का इस्तेमाल किया जाएगा.

प्रत्येक Level की Heading का एक Default Size होता है. जो अलग-अलग ब्राउजर में भिन्न हो सकता है. इसलिए आप प्रत्येक Level की Heading का Size, Color, Alignment आदि की Settings CSS – Cascading Style Sheets के द्वारा Set कर सकते है. जिससे प्रत्येक ब्राउजर में एक ही प्रकार की Headings Display होती है.

अगर आपके HTML Document में कोई शीर्षक है तो आप इसके लिए Heading Element का ही उपयोग करें. क्योंकि इससे आप HTML Standard को बनाए रखते है. आप Heading Formatting के लिए HTML के अन्य Tag <big> का इस्तेमाल करके भी <h1> की जैसी Formatting प्राप्त कर सकते है. लेकिन, इससे आप HTML Standard को तोड रहे होते है. जो आपके वेबपेज की Readability को कम करता है.

2. Importance of HTML Heading – HTML Heading का महत्व

समाचार पत्रों और पत्रिकाओं में पाठकों (Readers) का ध्यान आकर्षित करने के लिए Headings का उपयोग किया जाता है. आकर्षक शीर्षक को पढकर Readers Main content तक पहुँचते है.

इसी तरह Webpages, Blog Posts या अन्य Web Writings में भी Headings का इस्तेमाल Readers का ध्यान आकर्षित करने के लिए किया जाता है. HTML Headings का उपयोग Search Engine(s) Content को Index करने के लिए करते है. इनके अलावा भी HTML Headings का बहुत महत्व है. जिनके बारे में नीचे बताया जा रहा है.

1. Document का शीर्षक और बनावट (Structure) को Highlight करने के लिए Headings का इस्तेमाल किया जाता है. Document शीर्षक को Mainly H1 Heading द्वारा Define किया जाता है.

2. Document को Sections में Divide करने के लिए Headings जरूरी है. Headings से Document Structure पठनीय (Readable) हो जाता है. जिससे पाठक Content से जुडा रहता है.

3. Headings से एक वेबपेज कई भागों में बंट जाता है. इन भागों को शीर्षक Heading द्वारा दिए जाते है. जिनको पढकर Readers हमारे Document का महत्व के बारे में अंदाजा लगाते है.

4. Readers को तुरंत जानकारी देने में Headings सबसे महत्वपूर्ण भूमिका निभाती है.

5. HTML Headings का उपयोग Search Engines हमारे Content को जल्दी और सही तरह से Index करने के लिए भी करते है.

3. Types of HTML Heading – HTML Heading के प्रकार

HTML Language में Document Structure को सही तरह से Define करने के लिए 6 प्रकार की Headings दी गई है. जिनके बारे में नीचे बताया जा रहा है.

H1 Level Heading

यह HTML Document की Main Heading होती है. और यह सबसे पहले महत्वपूर्ण Heading भी होती है. एक

<h1>This is 1st Level Heading.</h1>

Blog Post या Webpage का शीर्षक H1 Level की Heading से ही Define किया जाता है. इस Heading को Document में सिर्फ एक बार ही Use करने की सलाह दी जाती है. उदाहरण:

H2 Level Heading

यह HTML Document की Sub-heading होती है. इसका Use Main Heading के बाद किया जाता है. H2 Heading से Document को उप-शीर्षक दिया जाता है. उदाहरण:

<h2>This is 2nd Level Heading.</h2>

H3 Level Heading

इसे Sub-sub-heading कहते है. और इसे Minor Heading के नाम से भी जाना जाता है. इसका Use Document में और गहराई से शीर्षक देने के लिए किया जाता है. उदाहरण:

<h3>This is 3rd Level Heading.</h3>

h4 Level Heading

इसे 4th Level Heading कहा जाता है. इस Heading से Document को Deep Sections में Divide किया जाता है. इसका इस्तेमाल किसी बडे Topic को छोटे Sections में बांटने के लिए किया जाता है. उदाहरण:

<h4>This is 4th Level Heading.</h4>

H5 Level Heading

5th Level Heading Content को और Deep Divide करने में सहायक है. इसे H5 Element से Define किया जाता है. उदाहरण:

<h5>This is 5th Level Heading.</h5>

H6 Level Heading

6th Level Heading भी Content को और Deeply Divide करने में सहायक है. यह सबसे कम Importance की Heading होती है. इसे H6 Element द्वारा Define किया जाता है. उदाहरण:

<h6>This is 6th Level Heading.</h6>

4. Example of HTML Heading – HTML Heading का उदाहरण

अब आप HTML Headings के बारे में पूरी जानकारी हो गई है. अब समय है जो आपने अब तक सीखा है. उसे व्यावहारिक रूप में उपयोग करने का. इस कार्य के लिए हमने एक उदाहरण तैयार किया है. जिसका उपयोग करने के बाद HTML Headings का Concept बिल्कुल Clear हो जाएगा.

नीचे लिखे HTML Code को Copy करके नोटपैड में Paste कीजिए या फिर इस Code को अपने हाथों से सीधे Notepad में Type कीजिए.

<!DOCTYPE html>
<html>
<body><h1>This is First Level Heading</h1>
<h2>This is Second Level Heading</h2>
<h3>This is Third Level Heading</h3>
<h3>This is Fourth Level Heading</h3>
<h5>This is Fifth Level Heading</h5>
<h6>This is Sixth Level Heading</h6></body>
</html>

ऊपर लिखे गए HTML Code को आप heading.html के नाम से Save कीजिए. और इसे Open कीजिए. आपके सामने यह उदाहरण इस प्रकार का Output दिखाएगा.

This is First Level of Heading.

This is Second Level of Heading.

This is Third Level of Heading

This is Fourth Level of Heading.

This is Fifth Level of Heading.

This is Sixth Level of Heading.

HTML Formatting Tags in Hindi – HTML Text Formatting in Hindi.

HTML Formatting Tags की पूरी जानकारी

आपने Word Processors जैसे; MS Word, WordPad आदि में Text को Bold, Italic किया होगा? इसे Text Formatting कहा जाता है.

Text Formatting आप HTML में भी कर सकते है. HTML Language में Text Formatting के लिए अलग से Special Elements Define किये गये है. Special Elements को Formatting Elements कहा जाता है.

Formatting Elements Text को Special Meaning में Define करते है. जैसे; <b> Element Bold Text Define करता है, <i> Element Italic Text Define करता है. इनके अलावा भी कई प्रकार के Formatting Tags HTML में Design किये गये है. जिनके बारे में नीचे बताया जा रहा है.

HTML में Formatting Tags के विभिन्न प्रकार

Table of Content

1. <b> – Bold Text

2. <strong> – Strong Text

3. <i> – Italic Text in HTML

4. <em> – Emphasized Text

5. <strike> – Strikethrough Text

6. <u> – Underline Text

7. <mark> – Marked Text

8. <del> – Deleted Text

9. <ins> – Inserted Text

10. <sup> – Superscript Text

11. <sub> – Subscript Text

12. <big> – Bigger Text

13. <small> – Small Text

14. आपने क्या सीखा?

1. Bold Text in HTML

HTML में Bold Text Define करने के लिए Bold Element का इस्तेमाल किया जाता है. इससे Text अपने पास वाले Text की तुलना में गहरा और मोटा हो जाता है. HTML में Bold Text ऐसे लिखा जाता है:

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

</body>

click

introduction-to-html

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Bold Text.

2. Strong Text in HTML

Strong Element से किसी Important (महत्वपूर्ण) शब्द/शब्दांश को Define किया जाता है. Strong Element भी शब्दों को अपने पास वाले शब्दों की तुलना में गहरा और मोटा कर देता है. HTML में Strong Element को इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p><strong>This is Important Text.</strong></p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Important Text.

Bold vs Strong Element

आप सोच रहे होंगे कि दोनों जब एक ही प्रकार की Formatting करते है, तो दोनों की क्या जरूरत है? और इनमे से किसी एक को कब Define करना चाहिए?

इसका सीधा-सा जवाब है. यदि आपका शब्द अन्य शब्दों की तुलना में महत्वपूर्ण है, तो आप Strong Element को Use कीजिए. अन्यथा आप Bold Element का इस्तेमाल कीजिए.

3. Italic Text in HTML

HTML Document में शब्दों को तिरछा लिखने के लिए Italic Element का इस्तेमाल किया जाता है. Italic Element शब्दों को अन्य शब्दों की तुलना में थोडा तिरछा कर देता है. Italic Element को इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p><i>This is Italic Text.</i></p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Italic Text.

4. Emphasized Text in HTML

Emphasized Element से भी शब्दों को तिरछा किया जाता है. लेकिन, एक Emphasized Text का महत्व Italic Text से ज्यादा होता है. Emphasized Element को इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p><em>This is Emphasized Text.</em></p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Emphasized Text.

Italic vs Emphasized Element

यहाँ भी आपको वही बात याद रखनी है, जो आपने Bold vs Strong Element में किया है. यदि आपके Text की Importance अन्य Text की तुलना में ज्यादा है, तो आप Emphasized Tag को Use कीजिए. अन्यथा आप Italic Element का इस्तेमाल कीजिए.

5. Strikethrough Text in HTML

Strikethrough Element शब्द/शब्दांश के बीच में एक आडि रेखा खींच देता है. इसे प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p><strike>This is Strikethrough Text.</strike></p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Strikethrough Text.

6. Underline Text in HTML

आपको याद होगा जब आप School/College में Notes लिखते है/थे, तो महत्वपूर्ण शब्दों या पंक्ति के नीचे एक Line खींच देते है. जिससे वह शब्द अलग दिखाई देता था. यहि कार्य HTML Document में Underline Element से किया जाता है. Underline Element Text के नीचे एक आडि रेखा खींच देता है. इसे इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p><u>This is Underlined Text.</u></p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Underlined Text.

7. Marked Text in HTML

Marked Text को Mark Element द्वारा Define किया जाता है. इससे खास शब्दों को Highlight किया जाता है. Mark Element को इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p>This is <mark>Marked</mark> Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Marked Text.

8. Deleted Text in HTML

Delete Element से Document से हटाए गए (Removed) शब्द को Define किया जाता है. जिस शब्द पर Delete Element Apply किया जाता है. वह शब्द बीच में से एक आडि रेखा द्वारा कट जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p>This is <del>Deleted</del> Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is ~~Deleted~~ Text.

9. Inserted Text in HTML

Insert Element द्वारा Delete किए गए शब्द की जगह पर अन्य शब्द Define किया जाता है. Insert Element को इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p>This is <del>Deleted</del> <ins>Inserted&lt/ins>Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is ~~Deleted~~ Inserted Text.

10. Superscript Text in HTML

Subscript Element द्वारा Superscript Text को Define किया जाता है. यह Text अपने पास वाले Text की तुलना में आधा हो जाता है, और Users को पास वाले शब्द के ऊपर नजर आता है. Subscript Text को इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p>This is <sup>Superscript</sup> Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Superscript Text.

11. Subscript Text in HTML

Subscript Element द्वारा Subscript Text को Define किया जाता है. यह Text Superscript Text से बिल्कुल उल्टा होता है. क्योंकि यह Text अपने पास वाले शब्द से नीचा दिखाई देता है. Subscript Text इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p>This is <sub>Subscript</sub> Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Subscript Text.

12. Bigger Text in HTML

Big Element द्वारा Larger Text को Define किया जाता है. Larger Text अपने पास वाले Text की तुलना में थोडा बडा हो जाता है. Big Text को इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Big Text.

13. Small Text in HTML

Small Element द्वारा Small Text को Define किया जाता है. Small Text अपने पास वाले Text की तुलना में थोडा छोटा हो जाता है. Small Text को इस प्रकार Define किया जाता है.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title></head>
<body>

<p>This is Normal Text.</p>

<p>This is <small>Small</small> Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Normal Text.

This is Small Text.

HTML Paragraph Element in Hindi – HTML Paragraph in Hindi.

HTML Paragraph Tag की पूरी जानकारी

HTML Tutorials के इस Lesson में हम आपको HTML Paragraph Element की पूरी जानकारी देंगे. आप जानेंगे कि HTML Paragraph Element क्या है? HTML Document में Paragraph Define कैसे किया जाता है?

HTML Paragraph Element को आसानी से समझने के लिए इस Lesson को कई अलग Sections में Divide किया है. जिनकी List नीचे दी जा रही है.

Table of Content

1. HTML Paragraph का परिचय – Introduction to HTML Paragraph in Hindi

2. HTML Paragraph Element के बारे में जानने योग्य कुछ जरूरी बातें

3. HTML Paragraph का उदाहरण – Example of HTML Paragraph

4. Paragraph Alignment

5. Paragraph Alignment का उदाहरण – Paragraph Alignment Example

6. Paragraph Indent

7. Paragraph Display Problems

8. Line Breaks

9. आपने क्या सीखा?

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 के बारे में जानने योग्य कुछ जरूरी बातें

1. HTML P Element एक Basic HTML Tag है. जिसे Block Level Element भी कहा जाता है.

2. HTML Paragraph को <p> Tag द्वारा Define किया जाता है. और Closing </p> Tag द्वारा बंद किया जाता है.
Note – Closing </p> Tag का इस्तेमाल जरूर करें.

3. P Element में सभी Global Attributes का उपयोग किया जा सकता है. इसके अलावा P Element Event Attributes को भी Support करता है.

4. सभी ब्राउजर Paragraph के ऊपर और नीचे कुछ Space Add कर देते है. यह कार्य Browsers’ कि Built-in Style Sheet द्वारा होता है.

5. ब्राउजरों की Default Style को Additional CSS द्वारा Override किया जा सकता है.

3. HTML Paragraph का उदाहरण – Example of HTML Paragraph

नीचे लिखे गए HTML Code को अपने Notepad में Copy करके Paste कीजिए या फिर इस कोड को सीधे अपने हाथों से Type कीजिए.

<!DOCTYPE html>
<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 किए जा सकते है.

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 कर सकते है.

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

Right Alignment

Right Alignment से Paragraph Browser Window में दांए तरफ सरक जाता है. लेकिन, उसे पढा तो बांए से दांए ही जाता है. Paragraph का Right Alignment इस प्रकार Set किया जाता है.

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

Center Alignment

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

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

Justify Alignment

Justify Alignment अखबार और पत्रिकाओं में दिखाई देता है. और ज्यादातर औपचारिक लेखन में Justify Alignment का ही उपयोग किया जाता है. इस Alignment से Paragraph Text के बांए और दांए तरफ बराबर का Space रहता है. Paragraph में Justify Alignment को इस प्रकार Set किया जाता है.

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

5. Paragraph Alignment Example

हमने ऊपर बताए गए सभी Alignments को एक साथ लिखकर एक उदाहरण तैयार किया है. जिसमे सभी Alignments को अलग-अलग Paragraphs पर Apply करके दिखाया गया है. आप भी नीचे लिखे गए HTML Codes को अपने Notepad में Copy करके Paste कीजिए. या फिर अपने हाथों से Type कीजिए.

<!DOCTYPE html>
<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 कर सकते है. जिनके बारे में नीचे बताया जा रहा है.

1. First Line Indenting

2. Paragraph Indenting

3. Indenting a Section of Document

4. 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 कर सकते है.

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Indenting Rule Example</title><style>
p {text-indent: 15px;}
</style>

यदि आप ऊपर लिखे गए Style Rule को अपने HTML Document पर Apply करते है. तो इससे Document में उपलब्ध सभी Paragraphs की पहली Line में 15px का Indent हो जाएगा. आप अपने हिसाब से इसे कम या ज्यादा कर सकते है.

यदि आप किसी Paragraph विशेष की पहली Line को Indent करना चाहते है. तो उस Paragraph में text-indent Attribute का इस्तेमाल करके Indenting कर सकते है. उदाहरण:

<p text-indent=”15px”>Write Paragraph Text Here.</p>

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 कीजिए. और देखिए आपको क्या दिखाई देता है?

<!DOCTYPE html>
<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 कीजिए. और देखिए आपको क्या दिखाई देता है?

<!DOCTYPE html>
<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 की कोडिंग इस प्रकार कर सकते है.

<p>This is first line.<br> This is another line.</p>

आपने क्या सीखा?

इस Lesson में आपको HTML Paragraph Element के बारे में पूरी जानकारी दी है. HTML Paragraph कैसे define किया जाता है? Paragraph Alignment क्या है? Paragraph Indenting क्या है? आदि के बारे में Example द्वारा समझाया है. इसके अलावा कुछ सामान्य Paragraph Display Problems के बारे में भी जानकारी दी है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोग साबित होगा.

HTML List in Hindi – HTML List Tag in Hindi.

इस Lesson में हम आपको HTML Lists के बारे में जानकारी देंगे. आप जानेंगे HTML List क्या होती है? HTML Document में List कैसे बनाते है? HTML List कितने प्रकार की होती है. आदि सवालों के जवाब भी आपको मिल जाएंगे.

HTML List Concept को आसानी से समझने के लिए इस Lesson को अलग-अलग छोटे-छोटे भागों में बांटा गया है. जिनकी सूची नीचे दी जा रही है.

Table of Content

1. HTML List का परिचय – Introduction to HTML List in Hindi

2. HTML List बनाने के लिए Use होने वाले HTML Elements के नाम और उपयोग

3. HTML List के प्रकार – Types of HTML List

4. HTML Unordered List

5. HTML Ordered List

6. HTML Definition List

7. Nested HTML List

8. आपने क्या सीखा?

1. HTMl List का परिचय – Introduction to HTML List in Hindi

HTML Document में Important Text को Points में Show कराने के लिए Lists का उपयोग किया जाता है. List Define करने के लिए List Elements का इस्तेमाल किया जाता है.

HTML List Document Structure को बनाए रखती है और महत्वपूर्ण सूचना को Points में Display करने में मदद करती है. जिससे हमारा Content अर्थपूर्ण और पठनीय नजर आता है.

HTML List बहुत महत्वपूर्ण होती है. Lists का उपयोग Articles के अलावा Websites में Navigation Menu Create करने के लिए भी किया जाता है. E-commerce Websites में Product Features को Display करने के लिए HTML Lists का ही इस्तेमाल किया जाता है.

2. HTML List बनाने के लिए Use होने वाले HTML Elements के नाम और उपयोग

HTML List बनाने के लिए कई Elements का उपयोग किया जाता है. इसलिए हम सबसे पहले HTML List Create करने के लिए काम आने वाले Elements के नाम और उनका उपयोग के बारे में बता रहे है.

· UL Element – UL Element का पूरा नाम Unorder List होता है. Unorder List Element द्वारा Bullet Lists या Unorder Lists बनाई जाती है.

· OL Element – OL Element का पूरा नाम Order List होता है. Order List Element द्वारा Number या Order Lists बनाई जाती है.

· LI Element – LI Element का पूरा नाम List Item होता है. List Item Element द्वारा एक List में लिखे जाने वाले Data को Define किया जाता है.

· DL Element – DL Element का पूरा नाम Definition List होता है. Definition List Element द्वारा Definition Lists को Define किया जाता है.

· DT Element – DD Element का पूरा नाम Definition Term होता है. Definition Term Element द्वारा Definition Term को Define किया जाता है.

· DD Element – DD Element का पूरा नाम Definition Description होता है. Definition Description Element द्वारा Definition Terms के Description को Define किया जाता है.

3. HTML List के प्रकार – Types of HTML List

HTML में Data को Points में दिखाने के लिए कई प्रकार की Lists का Use किया जाता है. प्रत्येक प्रकार की List का अपना विशेष उद्देश्य और अर्थ होता है. नीचे HTML List के प्रकार के बारे में बताया जा रहा है.

· Unordered List -UL List

· Ordered List – OL List

· Definition List – DL List

· Nested List

Unordered List

Unordered List को <ul> Tag द्वारा Define किया जाता है. इस Type की List का उपयोग एक प्रकार की सूचना को बिना किसी तय क्रम में दिखाने के लिए किया जाता है. Unordered List को Bulleted List भी कहते है. क्योंकि List Items के पहले Bullet लग जाते है.

इसे Try कीजिए.

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllist1.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List Example</title><body>
<ul>
<li>Computer</li>
<li>Tablet</li>
<li>Mobile</li>
</ul>
</body> </html>

जब आप ऊपर लिखे गए HTML Code को ब्राउजर में Run करेंगे तो आपको इस प्रकार का परिणाम मिलेगा.

· Computer

· Table

· Mobile

The type Attribute in Unordered List

Unordered List में type Attribute का इस्तेमाल Bullet Style को Define करने के लिए किया जाता है. By Default UL List में List Items के लिए “Circle” का इस्तेमाल किया जाता है. लेकिन, type Attribute की सहायता से हम Circle के अलावा 3 अन्य प्रकार की List Style Type लगा सकते है.

1. Circle

2. Square

3. Disc

4. None

इसे देखिए

हम आपको ऊपर बताए गए चारों List Style Type को उदाहरण द्वारा समझा रहे है. हम इसके लिए ऊपर दिए गए उदाहरण को ही ले रहे है. इसमें हमे type Attribute का उपयोग करके List Style Type को square Set कर रहे है.

<!DOCTYPE html>
<html>
<head>
<title>HTML List Example</title><body>
<ul type=”square”>
<li>Computer</li>
<li>Tablet</li>
<li>Mobile</li>
</ul>
</body> </html>

जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा.

· Computer

· Table

· Mobile

जिस प्रकार आपने List Style Type को square Set किया है. बिल्कुल इसी तरह disc, circle और none (कोई Style नही) Set कर सकते है. बस आपको Square के स्थान पर बाकि style Type को लिखना पडेगा और List Style Type बदल जाएगा.

Ordered List

Ordered List को <ol> Tag द्वारा Define किया जाता है. और List Item को <li> Element से Define करते है. Order List को Numbered List भी कहते है. OL का उपयोग एक प्रकार की सूचना को एकक तय Order (क्रम) में दिखाने के लिए किया जाता है. OL List में List Items के पहले Number Order से लिख जाते है.

इसे Try कीजिए.

Order List को समझाने के लिए भी हमने ऊपर बताए गए उदाहरण को ही लिया है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllist2.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List Example</title><body>
<ol>
<li>Computer</li>
<li>Tablet</li>
<li>Mobile</li>
</ol>
</body> </html>

1. Computer

2. Table

3. Mobile

The type Attribute in Ordered List

Ordered List में type Attribute का इस्तेमाल List Style Type को Define करने के लिए किया जाता है. By Default OL List में List Items के लिए “Number” का इस्तेमाल किया जाता है. लेकिन, type Attribute की सहायता से हम Number के अलावा 5 अन्य प्रकार की List Style Type लगा सकते है.

1. Number (Default) – 1

2. Uppercase Letter – A

3. Lowercase Letter – a

4. Uppercase Roman Number – I

5. Lowercase Roman Number – i

6. None

इसे देखिए

हम आपको ऊपर बताए गए सभी List Style Type को उदाहरण द्वारा समझा रहे है. हम इसके लिए ऊपर दिए गए उदाहरण को ही ले रहे है. इसमें हम type Attribute का उपयोग करके List Style Type को A Set कर रहे है.

<!DOCTYPE html>
<html>
<head>
<title>HTML List Example</title><body>
<ul type=”A”>
<li>Computer</li>
<li>Tablet</li>
<li>Mobile</li>
</ul>
</body> </html>

1. Computer

2. Table

3. Mobile

जिस प्रकार आपने List Style Type को A Set किया है. बिल्कुल इसी तरह 1, a, I, i और none (कोई Style नही) Set कर सकते है. बस आपको A के स्थान पर बाकि Style Type को लिखना पडेगा और List Style Type बदल जाएगा.

Definition List

किसी शब्द या Term विशेष को परिभाषित करने के लिए Definition Lists को बनाया जाता है. Definition List को <dl> Tag से Define किया जाता है. Definition Term को <dt> और Definition Description को <dd> Element से Define किया जाता है.

Online Dictionaries, Glossary Definition एवं किसी शब्द विशेष का अर्थ बताने के लिए Definition List सबसे Suitable Element है. क्योंकि इस List प्रकार में पहले Definition Term को Define किया जाता है. फिर उस Term का अर्थ बयाता जाता है. इस List की बनावट शब्दकोश की तरह होती है.

इसे Try कीजिए.

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllist3.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List Example</title><body>
<dl>
<dt>HTML</dt>
<dd>HTML stand for Hyper Text MarkUp Language and it is widely used to create webpages.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheet and it is used to Style an HTML Document.</dd>
</dl>
</body> </html>

HTML

HTML stands for Hyper Text MarkUp Language and it is widely used to create webpages.

CSS

CSS stands for Cascading Style Sheet and it is used to Style an HTML Document.

Nested HTML List

आप ऊपर HTML की सभी प्रकार की Lists को Define करना सीख चुके है. अब हम HTML में Nested List और बनाना सीखेंगे.

Nested List वैसे कोई HTML प्रकार नही है. लेकिन, हमने इसे यहाँ 4th प्रकार के रूप में शामिल किया है. ऐसा सिर्फ List Concept को सरल बनाने के उद्देश्य से किया गया है. ताकि Learners को सीखने में सुविधा रहे.

आइए, अब जानते है Nested List क्या होती है? Nested List को कैसे Define किया जाता है? और Nested List को बनाने का तरीका क्या है?

Introduction to Nested HTML List in Hindi

Nested List का मतलब होता है, एक List के अंदर अन्य List बनाना. सरल शब्दों मे कहे तो आप एक UL में OL Define कर सकते है. और एक OL में UL Define की जा सकती है.

इसे Try कीजिए

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllist4.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List Example</title><body>
<ol>
<li>Programming Languages
<ul>
<li>HTML</li>
<li>PHP</li>
</ul>
</li>
<li>CMS
<ol type=”a”>
<li>WordPress</li>
<li>Blogspot</li>
</ol>
</ol>
</body>

</html>

1. Programming Languages

o HTML

o PHP

2. CMS

1. WordPress

2. Blogger

ऊपर दिए गए उदाहरण को देखकर आप समझ ही गए होगे कि एक Nested List कैसे बनाई जाती है. आपने ध्यान दिया होगा कि एक List Item को Open करके उसके अंदर दूसरी List को Define किया गया है. फिर उस List Item को बंद किया गया है. HTML में इसी तरह ही Nested Lists को बनाया जाता है.

HTML Image in Hindi – HTML Image Element in Hindi.

HTML Image Tag की पूरी जानकारी

एक पूरानी कहावत है, “एक फोटो हजार शब्दों के बराबर होती है.” आप जो संदेश Image द्वारा बता सकते है. उतनी क्षमता शब्दों में नही होती है. Pictures की इसी ताकत को पहचानकर Webpages में भी Image का Use किया जाता है.

इस Tutorial में हम आपको बताएंगे कि Webpages में Image Insert कैसे की जाती है? HTML Document में Image Define कैसे करते है? Webpages में Image डालने का तरीका क्या है?

HTML Concept को सरल बनाने के लिए इस Lesson को हमने कई छोटे-छोटे Sections में बांटा है. इन Sections की सूची नीचे दी जा रही है.

Table of Content

1. HTML Image का परिचय – Introduction to HTML Image in Hindi

2. HTML Image का Syntax – Explanation of Image Syntax in Hindi

3. Image Element के साथ Commonly Use होने वाले Attributes के नाम और उपयोग

4. वेबपेज में फोटो जोडने का तरीका – Inserting Picture in HTML Document in Hindi

5. आपने क्या सीखा?

1. HTML Image का परिचय – Introduction to HTML Image in Hindi

Image हमारे वेबपेज को ज्यादा आकर्षक और सुंदर बनाती है. पाठक (Readers) भी बिना फोटो के साथ बनाए गए वेबपेज की तुलना में फोटो के साथ बनाए गए ब्लॉग पोस्ट को ज्यादा पंसद करते है.

इसलिए HTML में Image Element को जोडा गया है. Image Element का उपयोग HTML Document में Picture Insert करने के लिए किया जाता है. <img> Tag द्वारा Image को Define किया जाता है. <img> Tag एक Empty HTML Tag होता है. जिसका कोई साथी Tag यानि Closing Tag नही होता है.

एक HTML Document में विभिन्न Format में Images को Insert किया जा सकता है. आप PNG, JPEG, GIFs, आदि Format में फोटो को जोड सकते है. हम जिस भी Format में Image को Use करना चाहते है, उस Format को हमे बताना पडता है.

2. HTML Image का Syntax

HTML Document में Image Insert करने का Syntax नीचे दिया जा रहा है.

Image Syntax में दो चीजे महत्वपूर्ण होती है. पहला, खुद <img> Tag और दूसरी src Attribute. <img> Tag से तो आप परिचित ही है. यह तो अन्य Opening HTML Tags की तरह ही कार्य करता है.

लेकिन, इस टैग में src Attribute बहुत ही उपयोग और महत्वपूर्ण होता है. इस Attribute का काम Document में Image Path को Define करना होता है. आप जिस Image को अपने वेबपेज में जोडना चाहते है. उस Picture का Full URL Double Quotation Mark (“”) के भीतर लिखना पडता है. ताकि, Image विशेष हमारे Document में Download हो सके.

ध्यान दें: File Name Case Sensitive होता है. इसलिए Image का नाम जैसे लिखा हुआ है. वैसा ही आप src Attribute में लिखे. क्योंकि ब्राउजर के लिए picture.png और Picture.png दो अलग-अलग फाईल है.

इसके अलावा भी <img> Tag में कुछ और Attributes का इस्तेमाल किया जाता है. जो Image की अन्य विशेषताओं को Define करते है. जिनके बारे में नीचे बताया जा रहा है.

3. Image Element के साथ Commonly Use होने वाले Attributes के नाम और उपयोग

· src – इस Attribute का उपयोग Image के Source यानि URL को Define करने के लिए किया जाता है.

· alt – इस Attribute से Image के बारे में बताने के लिए किया जाता है.

· style – Style Attribute से Image पर CSS Rules को Apply किया जाता है.

· width & height – ये दोनो Attributes अलग-अलग उपयोग किए जाते है. इनके द्वारा Image Width और Height को Define किया जाता है.

· align – इसके द्वारा Image Alignment को Define किया जाता है.

· border – Image Border को Border Attribute से Define किया जाता है.

· title – Image को Title देने के लिए इस Attribute का उपयोग किया जाता है.

वेबपेज में फोटो जोडने का तरीका – Inserting Picture in HTML Document in Hindi

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlimage.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html>
<html>
<head>
<title>HTML Image Example</title><body>
<img src=”tpc-logo.png”>
</body></html>

जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा. हमने इस कोड के माध्यम से एक Image को वेबपेज में जोडा है. यह teachask का Official Logo है.

Image के लिए Alternative Text लिखना

Image के लिए Alternative Text लिखने के लिए alt Attribute का उपयोग किया जाता है. इसे Image Define करते समय src Attribute की तरह हमेशा Use करना चाहिए. क्योंकि जब किसी कारणवश Image Display नही होती है. तब यह Alternative Text ही User को दिखाई देता है. इसके अलावा Screen Readers, Search Engines आदि के लिए भी Alternative Text लिखना जरूरी है. क्योकि यह Image को देख नही सकते है. यह तो सिर्फ पढ सकते है.

इसे Try कीजिए

जब आप Image के लिए Alternative Text Define कर देते है तो यह Text User को दिखाई नही देता है. इसे सिर्फ Screen Readers और Search Engines Robots पढ सकते है. लेकिन, जब Image Display नही होती है, तो User को यह Text ही दिखाई देता है. एक Image के लिए Alternative Text इस प्रकार लिखा जाता है.

जब आप लिखे गए कोड से कोई Image Insert करेंगे और वह Image Show नही हो रही है. तो इसकी जगह पर हमे alt Attribute में लिखा गया Text दिखाए देगा.

Image की Width और Height Set करना

Image की Width और Height को Set करना एक सही काम है. आप Image Width और Height को CSS या फिर Style Attribute के द्वारा भी Set कर सकते है. लेकिन, हम यहाँ आपको width और height Attribute का उपयोग कर रहे है.

इसे Try कीजिए

हम Image की Width और Height Set करने के लिए ऊपर उपयोग की गए फोटो को ही ले रहे है. जिसकी Width 100px और Height 50 px Set की गई है. अब यह फोटो हमे इस Size में ही दिखाई देगी.

ऊपर दिये कोड से आपको Image इस प्रकार दिखाई देगी.

ध्यान दें: हमने यहाँ Image Width और Height को Pixels में Define किया है. आप चाहे तो Percentage (%), Points (pt), इसके अलावा भी कई अन्य Units में Set कर सकते है.

Image Alignment को Set करना

Image Alignment को align Attribute द्वारा Define किया जाता है. By Default Image हमें बांई तरफ दिखाई देती है. लेकिन, align Attribute से आप एक Image को Right और Center में भी Show करा सकते है.

इसे Try कीजिए

ऊपर दिए कोड में हमने Image को Center Align किया है. आपको अब यह Picture Webpage के बिचोबीच दिखाई देगी.

जिस प्रकार आपने यहाँ center Align Set किया है. ठीक इसी प्रकार आप right Align Set कर सकते है.

Image Border को Set करना

Image Border को Set करने के लिए border Attribute का इस्तेमाल किया जाता है. आप एक Image के लिए इस प्रकार Border Set कर सकते है.

इसे Try कीजिए

जब आप ऊपर लिखा गया कोड आपको इस प्रकार का परिणाम देगा.

आपने क्या सीखा?

इस Lesson में हमने आपको HTML Document में Image Insert करने के बारे में पूरी जानकारी दी है. आपने Image Element के साथ कुछ उपयोगी Attributes का Use करना भी सीखा है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.

HTML Table in Hindi – HTML Table Tag in Hindi.

HTML Table Tag की पूरी जानकारी

आपने MS Word में Table बनाई होगी. और अपने Data को Tabular Format (सारणी) में सजाया होगा? और ये होना लाजमी भी है. क्योंकि MS Word में Table बनाना बहुत ही आसान है.

Word Document की तरह Webpages में भी Data और Information को Tabular Format (सारणी) में प्रस्तुत किया जाता है. जिसके लिए HTML Table का इस्तेमाल किया जाता है. HTML से HTML Table बनाना बहुत ही सरल कार्य है.

इस Lesson में हम आपको HTML Document में Table बनाने की पूरी जानकारी देंगे. आप जानेंगे कि HTML में Table कैसे बनाई जाती है? HTML में Table Create करने के लिए किस HTML Element का इस्तेमाल किया जाता है?

HTML Table Concept को सरल बनाने के लिए हमने इस Lesson को छोटे-छोटे भागों में बांटा है. इन Sections की सूची नीचे दी जा रही है:

Table of Content

1. HTML Table का परिचय – Introduction to HTML Table in Hindi

2. HTML Table की बनावट – Structure of an HTML Table

3. HTML Table से संबंधित कुछ Important Tags के नाम और उनका उपयोग

4. एक HTML Table बनाना – Creating an HTML Table in Hindi

5. Table को Title (शीर्षक) देना

6. Table में Heading बनाना

7. Table में Border Set करना

8. Table की Height और Width Set करना

9. Table का Background Change करना

10. Cellpadding और Cellspacing Attributes का इस्तेमाल करना

11. Colspan और Rowspan Attributes का इस्तेमाल करना

12. आपने क्या सीखा?

1. HTML Table का परिचय – Introduction to HTML Table in Hindi

HTML Document में Table Element द्वारा Table Define की जाती है. Opening <table> Tag द्वारा एक Table को शुरू किया जाता है. और Closing </table> Tag द्वारा Table का समापन किया जाता है.

Table द्वारा हम Data को Tabular Format में Represent करते है. इस Data में Texts, Images, Videos, Links आदि प्रकार का Data शामिल होता है. हम अपनी जरूरत के अनुसार किसी भी प्रकार के Data को Table में Show करा सकते है.

2. HTML Table की बनावट – Structure of an HTML Table

आप ऊपर दिए गए फोटो को देखकर जान सकते है कि एक Table में Rows, Columns और Cells होते है. ये तीन Element ही एक Table के आधार होते है.

1. Columns – एक Table के खडे खाने को Column कहा जाता है. एक Table में आप अपनी जरूरत के अनुसार Columns Add और Remove कर सकते है. दो खडि रेखाओं से एक Column का निर्माण होता है.

2. Rows – Table में आडि रेखाओं से बने खाने को Row कहा जाता है. Rows एक Column के बिल्कुल विपरित होती है. दो आडि रेखाओं से एक Row का निर्माण होता है. HTML Table में <tr> Element द्वारा Row को Define किया जाता है.

3. Cell – Cell का निर्माण Rows और Columns से होता है. जब Columns और Rows आपस में टकराते है. तब एक Cell का निर्माण होता है. HTML Table में Actual Data को Cells में ही Define किया जाता है. <td> Element द्वारा Table Data यानि Cell को Define किया जाता है.

3. HTML Table से संबंधित कुछ Important Tags के नाम और उनका उपयोग

Table Element से HTML Table को Define किया जाता है. लेकिन, अकेला Table Element ही एक Table नही बना सकता है. इसलिए एक पूरी Table बनाने के लिए कुछ अन्य Tags का इस्तेमाल भी किया जाता है. जिनके बारे में नीचे बताया जा रहा है:

· <table> – इस Element द्वारा HTML Table को Define किया जाता है.

· <tr> – इस Element का पूरा नाम Table Row है. Table Row Element से Table Rows को Define किया जाता है.

· <td> – इस Element का पूरा नाम Table Data है. इसे Cell Data के नाम से भी जाना जाता है. Table Data से एक Table में Table Data को Define किया जाता है.

· <th> – इस Element का पूरा नाम Table Heading होता है. इसका Use Table में Headings को Define करने के लिए किया जाता है.

· <caption> – इस Element का इस्तेमाल Table Title Define करने के लिए किया जाता है.

4. एक HTML Table बनाना – Creating an HTML Table in Hindi

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmltable.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>

</html>

जब आप ऊपर दिए कोड को Save करके अपने मन पसंद ब्राउजर में Open करेंगे तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Example को समझिए

ऊपर दिए कोड से हमने एक Simple HTML Table को बनाया है. जिसमें 2 Rows और 4 Columns को Define किया गया है. Table Rows को Define करने के लिए <tr> Tag का इस्तेमाल किया गया है. और Table Rows में Data Cells को Define करने के लिए <td> Tag का इस्तेमाल किया गया है.

Note: आप एक Row में जितने Columns Define करना चाहते है. आपको उतने ही <td> Tag Define करने होंगे.

5. Table को Title (शीर्षक) देना

HTML Table का Title (शीर्षक) Define करने के लिए <caption> Element का इस्तेमाल किया जाता है. एक Table को शीर्षक देने से Table को पहचानने में आसानी रहती है. आप अलग-अलग प्रकार की Tables को अलग-अलग शीर्षक दे सकते है.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″>
<caption>My First HTML Table</caption>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:

My First HTML Table
Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

उदाहरण को समझिए

ऊपर दे गई HTML Table में हमने शीर्षक को Define किया है. इसके लिए हमने <caption> Tag का इस्तेमाल किया है. हमने इस Table को My First HTML Table शीर्षक दिया है. आप अपने अनुसार कुछ भी शीर्षक दे सकते है. शीर्षक देने के लिए <caption> Tag को <table> Tag के तुंरत बाद Define करना पडता है.

6. Table में Heading बनाना

HTML Table में Heading बनाने के लिए <th> Tag का इस्तेमाल किया जाता है. इस Element का पूरा नाम Table Heading होता है. Table में Heading में हम प्रत्येक Column को एक अलग नाम देते है. जिससे उस Column में उपलब्ध Data को पहचाना आसान हो जाता है. Table Heading By Default Bold और Center Aligned होती है. इस Setting को आप CSS के द्वारा Override भी कर सकते है.

Table Heading को अधिकतर Table की पहली Row में Define किया जाता है. आप अपने Table Data के अनुसार Headings का नाम दे सकते है.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″>
<caption>Heading in HTML Table</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:

click

introduction-to-html

Heading in HTML Table
First Name	Last Name
Rahul	Gautam
Subodh	Kumar

7. Table में Border Set करना

Table में चारों तरफ Border बनाने के लिए Border Attribute का इस्तेमाल किया जाता है. यदि आप Table में Border दिखाना चाहते है, तो Value को “1” रखें. और यदि आप बॉर्डर नही दिखाना चाहते है, तो Value को “0” रखें.

Border लगाने के अलावा आप Border Color भी Set कर सकते है. Border Color Set करने के लिए bordercolor Attribute का इस्तेमाल किया जाता है. आप अपनी पसंद का Color Set कर सकते है.

Note: आप Color Set करने के लिए Color का नाम या फिर उस Color विशेष का Hex Code भी इस्तेमाल कर सकते है. पसंद आपकी है. हम आपको Hex Code का इस्तेमाल करने के लिए कहेंगे.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red”>
<caption>Border in HTML Table</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:

Border in HTML Table
First Name	Last Name
Rahul	Gautam
Subodh	Kumar

8. Table की Height और Width Set करना

Table की Height और Width Set करने के लिए height और width Attributes का इस्तेमाल किया जाता है. आप अपनी जरूरत के अनुसार Table की ऊँचाई और चौडाई बना सकते है.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red” height=”200″ width=”300″>
<caption>Border in HTML Table</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:

Height and Width of HTML Table
First Name	Last Name
Rahul	Gautam
Subodh	Kumar

9. Table का Background Change करना

Table में Background Set करने के लिए दो Attributes का इस्तेमाल किया जाता है.

· bgcolor – इस Attribute द्वारा आप पूरी Table या किसी Particular Cell का Background Color को Change कर सकते है.

· background – इस Attribute से भी आप Table Background को Define कर सकते है. लेकिन, इसके द्वारा आप किसी Image को Table Background के रूप में इस्तेमाल कर सकते है.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red” height=”200″ width=”300″ bgcolor=”#FFFF66″>
<caption>Background in HTML Table</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:

Background in HTML Table
First Name	Last Name
Rahul	Gautam
Subodh	Kumar

10. Cellpadding और Cellspacing Attributes का इस्तेमाल करना

Table Cells और Texts के बीच खाली जगह (White Space) को Adjust करने के लिए Cellpadding और Cellspacing Attributes का उपयोग किया जाता है.

Cellpadding से Cell Border और Content के बीच की दूरी को Define किया जाता है. और Cellspacing से Cells के बीच की दूरी को Define किया जाता है.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red” cellpadding=”15″ cellspacing=”15″>
<caption>Cellpadding and Cellspacing in HTML Table
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>saurabh</td>
<td>kumar</td>
</tr>
<tr>
<td>sachin kumar</td>
<td>singh sagar</td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:

Cellpadding and Cellspacing in HTML Table
First Name	Last Name
saurabh	kumar
Sachin kumar	Singh sagar

11. Colspan और Rowspan Attributes का इस्तेमाल करना

जब हम Table में Data को एक से अधिक Rows और Columns में लिखना चाहते है, तो इसके लिए हमें colspan और rowspan Attributes का इस्तेमाल करना पडता है.

Colspan Attribute दो या अधिक Columns को Merge करके एक Column बना देता है. और Rowspan Attribute दो या अधिक Rows को Merge करके एक Row बना देता है.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title><body>
<table border=”1″ bordercolor=”red” width=”300″ height=”200″>
<caption>Colspan and Rowspan in HTML Table
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
<td rowspan=”2″>Delhi</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
<td colspan=”3″>Sanjay</td>
</tr>
</table>
</body>

</html>

ऊपर दिया कोड आपको इस प्रकार का परिणाम देगा:

Colspan and Rowspan in HTML Table
First Name	Last Name	City
Rahul	Gautam	Delhi
Subodh	Kumar
Sanjay

आपने क्या सीखा?

इस Lesson में हमने आपको HTML Table की पूरी जानकारी दी है. आपने जाना कि HTML Table को Table Element द्वारा Define किया जाता है. इसके अलावा आपने कुछ Important Attributes के बारे में भी जाना है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.

HTML Link in Hindi – HTML Link Tag in Hindi.

HTML Link की पूरी जानकारी

HTML Links इंटरनेट का Super Highway है. यह कहना गलत नही है. क्योंकि Hyperlinks के माध्यम से ही हम WWW – World Wide Web पर उपलब्ध Information (जानकारी) को Search वे Access कर पाते है.

और इस Lesson में हम आपको HTML Links की ही पूरी जानकारी देने वाले है. आप जानेंगे कि HTML Link क्या है – What is HTML Link in Hindi? HTML Links कैसे बनाते है – How to Create HTML Link in Hindi? HTML Links का विभिन्न प्रकार, HTML Links का महत्व (Importance) आदि के बारे में आपको जानकारी मिलेगी.

अध्ययन की सुविधा के लिए हमने इस Lesson को कई छोटे-छोटे भागों में बांटा है. जिनके नाम की सूची नीचे दी जा रही है:

Table of Content

1. HTML Links का परिचय – Introduction to HTML Links in Hindi.

2. HTML Links कैसे बनाये – How to Create HTML Links?

o HTML Link का Syntax – Introduction to HTML Link Syntax.

o एक HTML Link बनाना – Creating an HTML Link.

o HTML Link का Color बदलने का तरीका – Colors in HTML Link.

3. Anchor Element के साथ Use होने वाले कुछ Importance Attributes की जानकारी.

4. HTML Links का प्रकार – Type of HTML Links?

5. HTML Links का महत्व – Importance of HTML Links?

6. Base Tag का परिचय – Introduction to Base Tag in Hindi.

7. आपने क्या सीखा?

1. HTML Links का परिचय – Introduction to HTML Links in Hindi.

HTML का पूरा नाम Hypertext Markup Language होता है. जिसमें Hypertext HTML Links को ही Define करता है.

Links एक साधारण शब्द ही होता है, मगर इसे Anchor Element द्वारा Hyperlink में बदल दिया जाता है.

जब, आप एक HTML Link पर Mouse Cursor को ले जाते है, तो Cursor एक हाथ में बदल जाता है. यही चीज एक साधारण शब्द और Link में पहचान कराती है.

आपको लगभग हर Webpage पर Links मिल जाएगी. जिन पर क्लिक करके आप एक पेज से दूसरे पेज पर चले जाते है.

आइए अब हम भी HTML Links बनाना सीखते है?

2. HTML Links कैसे बनाये – How to Create HTML Links?

HTML Link बनाने के लिए Anchor Element का इस्तेमाल किया जाता है. Opening <a> Tag द्वारा Link को Define किया जाता है. Anchor Tag से हम Link तभी बना सकते है; जब हमे HTML Link Syntax की जानकारी होगी. तो आइए पहले Link Syntax को जानते है?

2.1 HTML Link का Syntax – Introduction to HTML Link Syntax.

नीचे HTML Link Syntax को दिया जा रहा है:

Syntax को समझिए:

1. a: a Anchor Tag को Represent करता है. और Opening Anchor Tag से एक Link को Define किया जाता है. मतलब उसकी शुरूआत होती है.

2. href: इसका पूरा नाम Hypertext Reference होता है. href Anchor Tag का एक जरूरी Attribute है, जो Destination Address (वेबपेज पता) को Define करता है. Destination URLs Standard Format (मान्य तरीका) में ही Define होने चाहिए.

3. Link Text: वह शब्द या शब्दांश होता है, जो Users को दिखाई देता है. मतलब जिस पर क्लिक होती है. यहाँ आप अपनी पसंद से कुछ भी लिख सकते है.

4. </a> यह Closing Anchor Tag होता है. यह ब्राउजर को बताता है कि यह HTML Link यही समाप्त हो गई है.

आपने जाना कि एक HTML Link Syntax चार अलग-अलग भागों से मिलकर बना होता है. जिसमें प्रत्येक भाग का अपना अलग कार्य होता है. उम्मीद है कि आपने Link Syntax को अच्छी तरह समझ लिया है. चलिए अब Link बनाते है.

2.2 एक HTML Link बनाना – Creating an HTML Link.

HTML से आप दो प्रकार की Link बना सकते है:

1. Text Link

2. Multimedia Link

a. HTML से Text Link बनाने का तरीका

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllink.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html>
<html>
<head>
<title>HTML Link Example</title></head>
<body>
<p>

Below is an HTML Link. By Clicking on it You Can Visit http://teachask.blogspot.com.

</p>

<a href=”http://teachask.blogspot.com>Visit http://teachask.blogspot.com</a>

</body>

</html>

जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा. हमने इस कोड में एक Paragraph और एक HTML Link Define किया है.

Example समझिए:

ऊपर दिए गए कोड के माध्यम से हमने एक Paragraph और एक HTML Link बनाई है. हमने यह Link, Link Syntax का उपयोग करते हुए ही बनाई है.

1. a: a से हमने Anchor Tag को Define किया है. जो Link की शुरुआत करता है. यह Opening Anchor Tag है.

2. href: इस Attribute में हमने एक Web Address; http://teachask.blogspot.com को लिखा है. जब आप Link Text पर क्लिक करेंगे तो आप इस वेबपते पर पहुँच जाऐंगे. आप यहाँ Standard Format (मान्य तरीका) में कोई भी Destination URLs Define कर सकते है.

3. Visit http://teachask.blogspot.com : यह Link Text है. जो Users को दिखाई देता है. जिस पर क्लिक करके Hypertext Reference यानि Web Address पर पहुँचा जाता है. आप यहाँ अपने हिसाब से कुछ भी लिख सकते है. बस आप URL सही होना चाहिए.

4. </a>: यह Closing Anchor Tag है. जो ब्राउजर को बताता है कि यह Link यहाँ समाप्त हो रही है.

b. HTML से Multimedia Link बनाने का तरीका

HTML Students द्वारा ये सवाल अक्सर पूछे जाते है कि HTML से Image Link कैसे बनाये? Video Link कैसे बनाते है?

तो इन सवालों का जवाब है: Multimedia Link. Multimedia Link से आप Image, Video, Audio, Gifs आदि को Link में बदल सकते है.

इसे Try कीजिए:

<!DOCTYPE html>
<html>
<head>
<title>HTML Image Link Example</title></head>
<body>
<p>

Below is an Image. By Clicking on it You Can Visit http://teachask.blogspot.com

</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Save करके अपने ब्राउजर में Open करेंगे तो आपके सामने कुछ इस प्रकार से खुलेगा:

Example समझिए:

HTML Image Link बनाना बहुत आसान है. हमने ऊपर एक Image Link बनाई है. हमने Link Text की जगह पर Image को Add किया है. और कुछ नही. हमने Image Add करने के लिए Image Tag का इस्तेमाल किया है. अगर आपको Webpage में Image Add करना नही आता है, तो आप इस Tutorial को पढिए.

आप इसी तरह किसी भी प्रकार की Multimedia File से HTML Link बना सकते है. बस आपको, Link Text की जगह पर Multimedia को Add करना है. बाकि Process Text Link के समान रहती है.

जब आप एक Image Link बनाते है, तो आपके सामने सिर्फ Image ही दिखाई देती है. लेकिन, जब आप इसके ऊपर Mouse Cursor को ले जाऐंगे तो Cursor एक हाथ में बदल जाता है. और यही एक Link की आसान पहचान है.

Text Link में हमें कोई शब्द/श्ब्दांश लिखना पडता है. और Multimedia Link में Text के स्थान पर कोई Multimedia File जैसे; Video, Image, Audio आदि को Add करना पडता है. एक Text Link और Multimedia Link में यही छोटा-सा अंतर होता है.

2.3 HTML Link का Color बदलने का तरीका – Colors in HTML Link.

आप HTML Link का Color भी अपने हिसाब से Set कर सकते है. By Default Link Color कुछ इस प्रकार से होता है:

1. Unvisited Link: जिस लिंक पर आपने अभी तक क्लिक नही किया है. Unvisited Link का Color Blue होता है, और ये Underlined रहती है.

2. Visited Link: जिस लिंक पर आप क्लिक कर चुके है. Visited Link का Color Purple होता है, और भी Underlined रहती है.

3. Active Link: जिस लिंक को आपने अभी आपके सामने खोला हुआ है. Active Link का Color Red रहता है, और ये भी Underlined रहती है.

जब आप HTML Link के लिए कोई Color नही Set करते है. तब भी ब्राउजर द्वारा ये Value दिखाई जाती है. अब आपने Links का Default Colors के बारे में जान लिया है. आइए अब अपनी पसंद का Link Color Set करते है.

इसे Try कीजिए:

<!DOCTYPE html>
<html>
<head>
<title>HTML Link Example</title></head>
<body link=”blue” alink=”green” vlink=”red”>
<p>

Below is an HTML Link. By Clicking on it You Can Visit http://teachask.blogspot.com .

</p>

<a href=” http://teachask.blogspot.com ”>Visit http://teachask.blogspot.com</a>

</body>

</html>

जब आप ऊपर दिए गए कोड को Save करके ब्राउजर में खोलेंगे तो आपके सामने कुछ इस प्रकार का परिणाम दिखेगा:

Example को समझिए:

हमने ऊपर Link Color बदलने के लिए Body Tag में link, alink और vlink Attributes का इस्तेमाल किया है. और इनमे Color को Set किया है. यहाँ जो Color Set किया गया है. यह आपके पूरे डॉक्युमेंट पर असर करता है. और आपके वर्तमान पेज पर जितनी भी Link होगी. उन सभी का Color इसके अनुसार हो जाएगा.

यहाँ link का मतलब Unvisited Link है; alink का मतलब Active Link है; और vlink का मतलब Visited Link है. आपको जो भी Color अपनी Link के लिए Set करना है, उसका नाम लिखिए बस आपका काम हो गया.

3. Anchor Element के साथ Use होने वाले कुछ Importance Attributes की जानकारी.

Anchor Element के साथ दोनों Global Attributes और Event Attributes का Use किया जा सकता है.

इनके अलावा भी कुछ Special और Commonly Used Attributes है, जो Anchor Element के साथ इस्तेमाल किए जाते है. इनके बारे में नीचे बताया जा रहा है:

1. href: इस Attribute का इस्तेमाल Link का Destination Address Define करने के लिए किया जाता है. मतलब किसी पेज विशेष का URL Define किया जाता है.

2. target: यह Attribute ब्राउजर को बताता है कि Destination Address को कहाँ खोलना है. Target Attribute की निम्न Value हो सकती है:

o _blank: यह Value URL को एक New Window/Tab में Open कराती है.

o _self: इसके द्वारा URL उसी Window/Tab में Open होता है, जिस Window/Tab पर आपने उस URL पर क्लिक किया है.

o _parent: इस Value के द्वारा URL Parent Frame में Open होता है.

o _top: इसके द्वारा URL पूरी Window में Open होता है.

o इस Value के द्वारा URL नाम विशेष Frame में Open होता है.

3. hreflang: इस Attribute से ब्राउजर को बताया जाता है कि Linked Document इस भाषा में लिखा गया है. भाषा को Standard Format में लिखा जाता है. जैसे; हिंदी का मान्य नाम hi है. और अंग्रेजी का मान्य नाम en है.

4. type: इस Attribute से Internal Media Type को बताया जाता है कि इस URL से इस प्रकार की फाईल जुडि हुई है.

5. download: इस Attribute से ब्राउजर को बताया जाता है कि इस URL से कोई Download होने वाला Content Linked है.

6. mailto: इस Attribute से Email Address को Define किया जाता है. जब आप इस प्रकार की लिंक पर क्लिक करते है, तो आप सीधे Mail Software पर पहुँच जाते है.

7. title: इस Attribute से Link को परिभाषित किया जाता है. जब आप किसी Link पर माउस को ले जाते है तो यह Title दिखाई देता है.

4. HTML Links का प्रकार – Type of HTML Links?

HTML Links के विभिन्न प्रकार है. हम आपको नीचे इनकी जानकारी दे रहे है:

1. Internal Link

2. External Link

3. Download Link

4. E-mail Link

1. Internal Link

Internal Link एक वेबसाईट का दूसरा URL होती है. अर्थात किसी वेबसाईट के एक Document में समान साईट के अन्य Documents की Links को Internal Links कहते है. जैसे; इस Lesson में हमने कई अन्य Lessons की Links को दिया हुआ है. ये सभी Links आपको इसी साईट के अन्य Lessons पर ले जाती है. इन्हे Internal Links कहते है.

2. External Link

External Link एक वेबसाईट पर किसी दूसरी वेबसाईट का URL होती है. अर्थात किसी वेबसाईट पर दूसरी वेबसाईट का URL या Specific Page URL को External Link कहते है. आपको इस साईट पर भी कई External Links भी मिल जाएगी. External Link आपको किसी दूसरी वेबसाईट पर ले जाती है. और आप वर्तमान वेबसाईट से बाहर हो जाते है.

3. Download Link

आप HTML से Download Link भी बना सकते है. Download Links का उपयोग विभिन्न प्रकार की फाईलों को Downloadable बनाने के लिए किया जाता है. आप Word, PDF, Videos, Pictures, Audios आदि प्रकार की फाईलों को अपने Users को Download करा सकते है. Files को Downloadable बनाने के लिए File का Full Path लिखना पडता है. आप एक Download Link इस प्रकार बना सकते है:

<!DOCTYPE html>
<html>
<head>
<title>HTML Download Link Example</title></head>
<body>

<a href=”http://www.teachask.com/tpc-logo.png/” download=”teachask Logo”>Download Logo Image</a>

</body>

</html>

जब आप ऊपर दिए गए कोड को Save करके ब्राउजर में Open करेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

Download Logo Image

Download Link भी साधारण Link की तरह ही होती है. बस इसमे आपको download Attribute को और जोडना पडता है. अगर आप इस Attribute को Link में नही जोडेंगे तो फाईल सीधे ब्राउजर में खुल जाएगी. और अगर आप download Attribute को जोडते है तो फाईल Users के System में डाउनलोड होती है. और जो Value आप download Attribute में लिखते है. वही फाईल का नाम हो जाता है. इसलिए डाउनलोड लिंक में download Attribute को जरूर शामिल करना चाहिए.

4. E-mail Link

HTML से आप ईमेल लिंक भी बना सकते है. E-mail Link के द्वारा आप Users को सीधे E-mail Programs तक ले जा सकते है. एक ईमेल लिंक इस प्रकार बनाई जाती है:

<!DOCTYPE html>
<html>
<head>
<title>HTML E-mail Link Example</title></head>
<body>

</body>

</html>

ऊपर लिखा गया कोड आपको इस प्रकार का परिणाम देगा:

Mail Us

E-mail Link बनाने के लिए href Attribute में URL में E-mail Address लिखना पडता है. बाकि Process HTML Text Link के समान ही रहती है. जब Users किसी ईमेल लिंक पर क्लिक करते है, तो यह Users को उनके Default E-mail Program पर पहुँचा देती है.

5. HTML Links का महत्व – Importance of HTML Links?

बिना Links के Internet अधूरा है. Links ही इंटरनेट का महत्व सिद्ध करती है. नीचे HTML Links के कुछ उपयोगों की जानकारी दी जा रही है. जिनसे आप खुद HTML Links की Importance का अदांजा लगा सकते है:

1. HTML Link का उपयोग एक Document को दूसरे Document से जोडने के लिए किया जाता है.

2. Users को आसान Navigation भी Links के द्वारा ही उपलब्ध कराया जाता है.

3. External Links, जिन्हे SEO – Search Engine Optimization की दुनिया में Backlinks भी कहते है. ये SEO का अहम हिस्सा होती है.

6. Base Tag का परिचय – Introduction to Base Tag in Hindi.

जब आप किसी वेबसाईट के एक पेज में संबधित पेज के Links बनाते है, तो आपको सभी Links का Full Path लिखना पडता है. लेकिन, <base> Tag के द्वारा इस कार्य से छुटकारा पा सकते है.

<base> Tag को Document के Header में Set किया जाता है. और बाकि Relative Links को Document के Body Section में लिखा जाता है. Base Path इस प्रकार Set किया जाता है:

<!DOCTYPE html>
<html>
<head>
<title>HTML Base Path Example</title><base href=”https://teachask.blogspot.com /”>

</head>
<body>

<a href=”/about-us”>Know About Us</a>

</body>

</html>

हमने ऊपर कोड में एक Base Path – http://teachask.blogspot.com / Set किया है. और Body Section में एक Link http://teachask.blogspot.com – /about-us बनाई है, जो आपको teachask के About Us Page पर ले जाती है.

नीचे वाली लिंक में हमने पूरा URL नही लिखा है. लेकिन, Base Path के कारण ब्राउजर इस URL को http://teachask.blogspot.com/about-us के समान ही मानता है. आप इस प्रकार कितने भी URLs लिख सकते है. ऊपर दिया कोड इस प्रकार का परिणाम देगा:

7. आपने क्या सीखा?

इस Lesson में हमने आपको HTML Links के बारे में पूरी जानकारी दी है. आपने जाना है कि HTML Links क्या होती है? HTML Links कैसे बनाते है? Links के प्रकार, उपयोग आदि. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.

HTML Form in Hindi – HTML Form Element in Hindi.

HTML से Form कैसे बनाये?

Websites HTML Documents यानि Webpages का संकलन हैं. और एक HTML Document अनेक HTML Elements से मिलकर बना होता हैं. इसमे Headings, Paragraphs, Lists, Images आदि शामिल होते हैं.

इनके अलावा भी कई अन्य महत्वपूर्ण HTML Elements होते हैं. जिनमे एक HTML Form Element भी शामिल हैं. इस Tutorial में हम आपको HTML Form Element की पूरी जानकारी देंगे. आप जानेंगे कि HTML से Form कैसे बनाया जाता हैं? इस Lesson को सुविधा की दृष्टि से छोटे-छोटे भागों में बांटा गया हैं.

Table of Content

1. HTML Form का परिचय – Introduction to HTML Form in Hindi.

2. Name of All Form Elements.

3. Form Element के साथ Use होने वाले कुछ Importance Attributes की जानकारी.

4. Creating HTML Form.

o Syntax of HTML Form Element.

o Defining HTML Form with Example.

5. Different Types of Data Input Controls in HTML Form.

o Text Input Controls

o Form में Check Box बनाना

o Form में Radio Buttons बनाना

o Form में Drop-down List/Select Box बनाना

o File Upload Controls

o Submit & Reset Button बनाना

6. Grouping Form Data.

7. आपने क्या सीखा?

HTML Form का परिचय

Users से जानकारी लेने के लिए HTML Forms का इस्तेमाल किया जाता हैं. इस जानकारी में फीडबैक, निजि जानकारी, संदेश, शिकायत या अन्य कुछ सुझाव आदि हो सकते हैं.

आपको Websites में HTML Forms कई रूपों में मिल जाऐंगे. आप इन्हे Sign Up Forms, Log in Forms, Payment Details Forms, Survey Forms आदि के रूप में देख सकते हैं. क्या आप जानते हैं कि Google का Search Box भी एक HTML Form ही हैं?

Forms में Users द्वारा जरूरी जानकारी को भरा जाता हैं. और इस जानकारी को Server पर भेज दिया जाता हैं. जहाँ से इसे Webmasters Access कर पाते हैं.

सभी Form Elements की जानकारी

HTML Forms को Form Element द्वारा Define किया जाता हैं. Form एक Container Tag की तरह काम करता हैं. जिसके अंदर अन्य Form Elements को Define करके Forms को बनाया जाता हैं. Form Element के अलावा भी कई अन्य Important Form Elements भी होते हैं. जिनके बारे में नीचे बताया जा रहा हैं.

· input – Input Element HTML Form का दूसरा Required Element हैं. Input Element के द्वारा Form में विभिन्न प्रकार के Data Fields को Define किया जाता हैं. जिनका निर्धारण type Attribute करता हैं.

· select – Select Element से Form में एक Drop-down List को Define किया जाता हैं. इससे अधिक जानकारी एक Field में ही समाहित हो जाती हैं.

· textarea – वैसे तो Input Element द्वारा Text Field Define किए जा सकते हैं. लेकिन, Multiline Data Fields को textarea Element द्वारा ही Define किया जा सकता हैं. क्योंकि Input Element से सिर्फ Single-line Data Field ही बनाए जा सकते हैं.

Form Elements के प्रमुख Attributes

Form Tag के साथ आप Global Attributes और Event Attributes को Define कर सकते हैं. क्योंकि Form Tag Global और Event Attributes को Support करता हैं.

इन दोनों के अलावा कुछ Attributes को सिर्फ Form Tag में ही Define किया जा सकता हैं, जो Element-specific Attribute कहलाते हैं. जिनके बारे में नीचे बताया जा रहा हैं.

· action – User द्वारा Form Submit करने के बाद जो कार्य आप Server से करवाना चाहते हैं से action Attribute द्वारा Define किया जाता हैं.

· Method – आप Form Data को जिस Method से Submit करवाना चाहते हैं उसे Method Attribute से Define किया जाता हैं. यदि आपका Data में संवेदनशील या निजि जानकारी शामिल हैं तो आपको Post Method Define करनी चाहिए. नही तो आप Get Method को Use कर सकते हैं.

· Target – आप Result Page को जिस Window में Open करना चाहते हैं, उसे target Attribute द्वारा Define किया जाता हैं.

एक HTML Form बनाना

अब तक आप जान चुके हैं कि HTML Form को Form Element द्वारा Define किया जाता हैं. और अब हम एक HTML Form बनाने का तरीका बताने जा रहे हैं.

HTML Form बनाने से पहले हम आपको Form Syntax की जानकारी दे रहे हैं. ताकि आप सही तरह से HTML Form बना सके.

HTML Form का Syntax

नीचे Form Syntax दिया जा रहा हैं.

<form>

Form Elements

</form>

Syntax को समझिए

ऊपर आपने देखा कि Form Syntax बिल्कुल आसान हैं. जिसमें सिर्फ Opening Form Tag और Closing Form Tag का इस्तेमाल किया गया हैं. इन दोनों Tags के बीच में अन्य Form Elements के द्वारा Data Fields को Define किया जाता हैं.

HTML Form Define करना

अब हम एक HTML Form बनाऐंगे. यह एक साधारण HTML Form हैं. जिसे सिर्फ आपको समझाने के लिए बनाया गया हैं. नीचे दिए गए HTML Code को किसी Text Editor जैसे Notepad में लिखिए या फिर इसे Copy करके Paste कर दिजिए और इसे form.html के नाम से Save कीजिए.

<!DOCTYPE html>
<html>
<head><title>HTML Form Example</title></head>
<body>
<form>First Name: <input type=”text” name=”firstname”>
Last Name: <input type=”text” name=”lastname”>
<input type=”submit” value=”Submit”></form>
</body>
</html>

अब आप ऊपर दिए गए HTML Code को Save करके ब्राउजर में Open कीजिए तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.

Top of Form

First Name:

Last Name:

Bottom of Form

Form में विभिन्न प्रकार के Data Fields बनाना

HTML Form द्वारा Users से कई प्रकार की जानकारी प्राप्त की जाती हैं. इस कार्य के लिए अलग-अलग प्रकार के Data के लिए भिन्न-भिन्न Data Fields की जरूरत होती हैं. ताकि Users से प्राप्त Data को छांटा जा सके. नीचे हम आपको एक फॉर्म में इस्तेमाल होने वाले Data Input Fields के नाम और उपयोग बता रहे हैं.

Text Input Controls

Text Input Controls सबसे ज्यादा उपयोग होने वाला Data Fields हैं. जब Users से Text के रूप में जानकारी प्राप्त करनी होती हैं तो इस प्रकार के Input Controls को Form में Define किया जाता हैं. Text Input Controls के तीन प्रकार होते हैं.

· Single-line Text Input Control – जब Users से केवल एक Line का Data Input करवाने की जरूरत होती हैं, तब इस प्रकार के Data Fields को Define किया जाता हैं. इसके लिए <input> Tag में type Attribute की Value को text लिखा जाता हैं.

· Password Text Input Control – यह भी एक प्रकार का Single-line Text Input Control ही हैं. इसमे जब Users Data को लिखता हैं तो इसमे Data किसी खास प्रकार के Characters में बदल जाता हैं. इसके लिए <input> Tag में type Attribute की Value को password लिखा जाता हैं.

· Multi-line Text Input Control – जब Users से एक से ज्यादा Lines में Data Input करवाने की जरुरत होती हैं, तब Multi-line Text Input Controls को HTML Forms में Define किया जाता हैं. इसके लिए <textarea> Tag का इस्तेमाल किया जाता हैं. जिसमे हम Rows और Columns Define कर सकते हैं.

Text और Password Input Control Define करना

नीचे दिए गए HTML Code को नोटपेड या किसी अन्य Text Editor में लिखिए या इसे Copy करके Paste कीजिए और इसे input-form.html के नाम से Save कर दीजिए.

<!DOCTYPE html>
<html>
<head><title> Single-line Text Input Control Example</title></head>
<body>
<form>User ID: <input type=”text” name=”id”>
Password: <input type=”password” name=”password”>
<input type=”submit” value=”Submit”></form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा. इसमे हमने आपको Single-line और Password Input Controls दोनों को एक साथ Define करना बताया हैं.

Top of Form

User ID:

Password:

Bottom of Form

Multi-line Text Input Control Define करना

नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html>
<html>
<head><title> Multi-line Text Input Control Example</title></head>
<body>
<form>Message:
<textarea rows=”5″ cols=”30″ name=”message”>
Write your message here…
</textarea></form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा. इसमे हमने आपको Multi-line Text Input Control को Define करना बताया हैं. आप इसकी लंबाई और चौडाई को क्रमश: rows और cols Attribute द्वारा Define कर सकते हैं.

Top of Form

Message:

Bottom of Form

Form Check Box

जब Users को एक से ज्यादा विकल्प को चुनना पडता हैं तो इसके लिए Check Boxes का इस्तेमाल किया जाता हैं. इसे भी <input> Tag द्वारा ही Define किया जाता हैं. लेकिन, type Attribute की Value को checkbox लिख दिया जाता हैं.

HTML Form में Check Box Define करना

<!DOCTYPE html>
<html>
<head><title> Check Box Input Control Example</title></head>
<body>
<form>Choose Your Subjects:
<input type=”checkbox” name=”hindi”> Hindi
<input type=”checkbox” name=”english”> English
<input type=”checkbox” name=”maths”> Maths
<input type=”checkbox” name=”science”> Science
<input type=”checkbox” name=”ss”> Social Sciences</form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.

Top of Form

Select Your Subjects:
Hindi
English
Maths
Science
Social Sciences

Bottom of Form

Form में Radio Buttons बनाना

जब एक से ज्यादा विकल्पों में से सिर्फ एक ही विकल्प Users द्वारा Select करवाया जाए तो इसके लिए Radio Buttons को फॉर्म में Define किया जाता हैं. Radio Buttons को भी <input> Tag द्वारा ही Define किया जाता हैं. बस type Attribute में Value को radio लिख दिया जाता हैं.

HTML Form में Radio Button Define करना

<!DOCTYPE html>
<html>
<head><title> Radio Buttons Input Control Example</title></head>
<body>
<form>Select Your Official Language:
<input type=”radio” value=”hindi” name=”subject”> Hindi
<input type=”radio” value=”english” name=”subject”> English
<input type=”radio” value=”tamil” name=”subject”> Tamil
<input type=”radio” value=”urdu” name=”subject”> Urdu
<input type=”radio” value=”bangla” name=”subject”> Bangla</form>
</body>
</html>

Top of Form

Select Your Official Language:
Hindi
English
Tamil
Urdu
Bangla

Bottom of Form

Form में Drop-down List/Select Box बनाना

आप फॉर्म में Drop-down List भी बना सकते हैं, इसे Select Box Control के नाम से भी जाना जाता हैं. इस प्रकार के Input Control को <select> Tag द्वारा Define किया जाता हैं, और <option> Tag द्वारा विकल्पों को Define किया जाता हैं.

Form में Drop-down List Define करना

<!DOCTYPE html>
<html>
<head><title> Drop-down List Input Control Example</title></head>
<body>
<form>Select Your State:
<select name=”dropdown”>
<option value=”delhi”> Delhi&lt/option>
<option value=”rajasthan”< Rajasthan</option>
<option value=”haryana”> Urdu<option>
</select></form>
</body>
</html>

Top of Form

Select Your State:

Bottom of Form

File Upload Controls

Users से किसी प्रकार की फाईल Upload करवाने के लिए File Upload Control भी एक फॉर्म में Define किया जाता हैं. आप फोटो, Text File या किसी अन्य प्रकार की फाईल फॉर्म द्वारा Upload करवा सकते हैं. इसके लिए <input> Tag का ही इस्तेमाल किया जाता हैं. लेकिन, type Attribute में Value को file लिख दिया जाता हैं.

HTML Form में File Upload Box Define करना

<!DOCTYPE html>
<html>
<head><title> File Upload Box Example</title></head>
<body>
<form>Upload Your Resume:
<input type=”file” name=”resume”>
</form>
</body>
</html>

Top of Form

Upload Your Resume:

Bottom of Form

Submit and Reset Button बनाना

आप एक फॉर्म में विभिन्न प्रकार के HTML Buttons बना सकते हैं. इनमे प्रमुख रूप से Submit और Reset Button का ज्यादा इस्तेमाल किया जाता हैं. आप अन्य प्रकार के Clickable Buttons जैसे Image Button, Send Button आदि भी बना सकते हैं.

HTML Form में Clickable Buttons Define करना

आप Form में Clickable Button <input> Tag द्वारा Define कर सकते हैं. इसके लिए आपको type Attribute में Value को button Define करना हैं. आप नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html>
<html>
<head><title> Clickable Buttons Example</title></head>
<body>
<form><input type=”submit” name=”submit” value=”Submit”>
<input type=”reset” name=”reset” value=”Reset”>
<input type=”button” name=”send” value=”Send”>
<input type=”image” name=”imagebutton” src=”image url”>
</form>
</body>
</html>

Grouping Form Data

आप एक ही Form में Users से कई प्रकार की जानकारी पाप्त कर सकते हैं. जिसमें निजी जानकारी, शैक्षिक जानकारी, व्यावसायिक जानकारी आदि हो सकती हैं.

एक प्रकार की जानकारी को आप एक नाम विशेष से शीर्षक दे सकते हैं. इस कार्य को Grouping करना कहते हैं. जिसे Fieldset और Legend Element द्वारा Define किया जाता हैं.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head><title> Grouping form Data Example</title></head>
<body>
<form><fieldset>
<legend>Personal Information:</legend>
First Name
<input type=”text” name=”fname”>
Last Name
<input type=”text” name=”lname”>
</fieldset>
<fieldset>
<legend>Log in Details:</legend>
User ID
<input type=”text” name=”ID”>
Password
<input type=”password” name=”password””>
</fieldset>
</form>
</body>
</html>

जब आप ऊपर दिए गए HTMl Code को सेव करके ब्राउजर में खोलेग तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.

आपने क्या सीखा?

इस Lesson में हमने आपको HTML Form की पूरी जानकारी दी हैं. आपने जाना कि एक HTML Form कैसे बनाया जाता हैं? HTML Form में इस्तेमाल होने वाले विभिन्न Data Controls Fields के बारे में भी आपने जाना हैं. हमे उम्मीद हैं कि यह Lesson आपके लिए उपयोगी साबित होगा.

HTML Comment in Hindi – HTML Comment Element in Hindi.

HTML Comment Tag की पूरी जानकारी

जब हम HTML Basics सीख रहे होते है, तो हमें HTML Comment के बारे में भी सीखाया जाता है. और यदि आप HTML से Webpage बनाना जानते है तो आपको HTML Comment के बारे में जानकारी होना बहुत जरूरी है.

क्या आप जानते है कि एक HTML Comment क्या होता है – What is an HTML Comment? HTML Document में HTML Comment कैसे लिखा जाता है – How to Define an HTML Comment? HTML comment कितने प्रकार के होते है – Different Types of HTML comments? HTML Comment का क्या महत्व है?

अगर नही! तो कोई बात नही. इस Lesson में हम आपको ऊपर पूछे गये सभी सवालों के जवाब देंगे. HTML Comment को आसानी से समझने के लिए इस Tutorial को हमने निम्न भागों में विभाजित किया है:

Table of Content

1. HTML Comment का परिचय – Introduction to HTML Comment in Hindi.

2. HTML Comment Syntax in Hindi.

3. HTML Document में Comment लिखना – Defining Comment in Hindi.

4. Comment के विभिन्न प्रकार – Types of HTML Comment in Hindi.

5. HTML Comment का महत्व – Importance of HTML Comment in Hindi.

6. आपने क्या सीखा?

1. HTML Comment का परिचय – Introduction to HTML Comment in Hindi.

Comment एक HTML Code होता है, जिसे ब्राउजर द्वारा पढा नही जाता है. और इस Code को वेबपेज में दिखाया नही जाता है. अर्थात जो Content HTML Comment Tag के अंदर लिखा जाता है. इसे केवल Browsers और Developers ही देख सकते है. End Users इस Content को नही देख सकता है.

HTML Document की कोडिंग में Comments को इस्तेमाल करना एक पेशेवर कौशल (Professional Skill) है. जो आपको एक Professional Web Developer की श्रेणी में लाती है. अधिकतर अनुभवी डवलपर HTML Comments का इस्तेमाल करते है. इसलिए हम भी आपको इसे उपयोग करने की सलाह देंगे.

HTML Document में Comment Tag द्वारा Comment को Define किया जाता है. वैसे, HTML 5 में Comment Tag को हटा दिया गया है. फिर भी कुछ ब्राउजर Comment Tag को अभी भी Support करते है. Internet Explorer इसका सबसे अच्छा उदाहरण है.

2. HTML Comment Syntax in Hindi.

HTML Comment के लिए एक Special Tag काम में लिया जाता है. जिसका Syntax बाकि HTML Tags से अलग होता है. HTML Comment Syntax इस प्रकार का होता है:

ऊपर आप देख सकते है कि Comment Tag की बनावट बाकि HTML Tags की बनावट से किस प्रकार अलग होती है. एक Comment Tag के Syntax में तीन भाग होते है:

1. Opening: Comment की Opening में Less Than Symbol (<), Exclamation Mark (!) और दो Dash (—) होते है. इसे आप Opening Tag भी बोल सकते है.

2. Closing: Closing में दो Dash (—) और एक Greater Than Symbol (>) होता है. इसे आप Closing Tag भी बोल सकते है.

3. Comment Text: Opening और Closing के भीतर जो भी लिखा जाता है. उसे Comment Text कहते है. यह हिस्सा हमें वेबपेज में दिखाई नही देता है.

जब हम इन तीनों को एक साथ लिखते है तो Comment Tag का निर्माण होता है. जो कुछ इस प्रकार दिखाई देता है:

<!– Comment Text –>

अब आपने HTML Comment Tag के Syntax को तो समझ लिया लिया है. आइए अब HTML Document में Comment लिखने का तरीका जानते है.

3. HTML Document में Comment लिखना – Defining Comment in Hindi.

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlcomment.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html>
<html>
<head>
<title>HTML Comment Example</title>

</head>
<body>
<p> <!– Paragraph Starting. –>

This is teachask Here you can Learn in Hindi.

</p> <!– Paragraph Ending. –>
</body>

</html>

जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा. हमने इस कोड में एक Comment Define किया है.

This is teachask. Here your can Learn in Hindi.

Example को समझिए:

ऊपर दिए HTML Code में हमने Opening Paragraph Tag के बाद एक Comment Define किया है. जैसा आप जानते है कि जो भी HTML Code Body Tag के भीतर लिखे जाते है. वह हमें ब्राउजर में दिखाई देते है. इस प्रकार हमें Comment भी दिखाई देने चाहिए थे. लेकिन, ऐसा नही हुआ है. हमें सिर्फ कमेंट के बाद लिखा हुआ Text ही दिखाई दे रहा है.

इसका मतलब है कि हमारा Comment काम कर रहा है. और ब्राउजर ने उसे Ignore कर दिया है. और यहि होना चाहिए था. और हमें Closing Paragraph Tag के बाद भी लिखा गया कमेंट दिखाई नहि देगा.

4. Comment के विभिन्न प्रकार – Types of HTML Comment in Hindi.

वैसे तो Comment के आधारिक तौर पर कोई प्रकार नहि बताये गये है. लेकिन, हमने Comment को समझने की सुविधा के लिए Comment के तीन प्रकार बताये है:

1. Single Line Comment

2. Multi Line Comment

3. Conditional Comment

1. Single Line Comment: जब HTML Document में सिर्फ एक Line पर कमेंट किया जाता है, उसे Single Line Comment कहते है. Single Line Comment को इस प्रकार Define किया जाता है.

<!– This is Single Line Comment. –>

2. Multi Line Comment: जब HTML Document में एक से ज्यादा Lines पर Comment किया जाता है, तो इसे Multi Line Comment कहते है. इसका उपयोग एक Paragraph या अधिक Paragraphs को Describe या एक साथ Users से छिपाने के लिए किया जाता है. Multi Line Comment को इस प्रकार Define किया जाता है.

<!– This is Multi Line Comment.
This Comment Apply More Than One Line.
You Can Apply This for Whole Paragraph or Document. –>

3. Conditional Comment: इस प्रकार के Comments को Internet Explorer Browser के लिये लिखा जाता है. अन्य ब्राउजर Conditional Comments को Ignore कर देते है. Conditional Comment द्वारा IE Browser के अलग-अलग Versions के लिये Conditional Instructions लिखे जाते है. Conditional Comment को इस प्रकार लिखा जाता है.

<!DOCTYPE html>
<html>
<head>

<–[if IE 7]

Special Instructions Goes Here…

<![endif]–>

</head>
<body>
</body>
</html>

अगर आप IE के अलग-अलग Versions के लिए भिन्न-भिन्न style Use करना चाहते है. तब आप Conditional Comment के द्वारा यह कार्य कर सकते है.

5. HTML Comment का महत्व – Importance of HTML Comment in Hindi.

1. जब किसी जानकारी को Users से छिपाना होता है. तब उस Content विशेष को Comments के माध्यम से बिना Delete किये छिपाया जा सकता है.

2. किसी HTML Document के अलग-अलग भागों को Comment के द्वारा नामकरण किया जा सकत है. इससे HTML Code को समझने में आसानी रहती है.

3. जब आप HTML Code को किसी अन्य Developer के साथ Share करना चाहते है. तो Comment के माध्यम से उस Code विशेष के बारे में बताया जा सकता है कि आपको इस Code पर करना है. इस प्रकार उसे कोड ढूंढने में समय नही लगता है.

4. किसी ब्राउजर विशेष को Conditional Instructions देने के लिए भी HTML Comments महत्वपूर्ण है.

5. HTML Document बहुत बडे होते है. जिनमे बहुत अधिक कोड लिखा जाता है. जो एक दिन का काम नही है. इसलिए Coding करते वक्त बीच-बीच में Comments के माध्यम से Notes डाल दिये जाते है. ताकि काम को दुबारा से वही से शुरू किया जा सके.

आपने क्या सीखा?

इस Lesson में हमने आपको HTML Comment की पूरी जानकारी विस्तारपूर्वक बताई है. आपने जाना कि HTML Comment क्या होता है? Comment कैसे Define किया जाता है? HTML Comment के विभिन्न प्रकार और HTML Comment का महत्व भी आपने जाना है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.

HTML Meta Tags in Hindi – All HTML Meta Tags List in Hindi.

Meta Tag क्या हैं? HTML Meta Tags की पूरी जानकारी

HTML Document या Blog Posts को Readers के लिए लिखा जाता हैं. इनमे सारी Information/जानकारी हमारे पाठकों को ध्यान में रखकर लिखि जाती हैं.

लेकिन, इस जानकारी को हमारे पाठकों के सामने Search Engines ढूँढकर लाते हैं. इसलिए कुछ Information सर्च इंजन के लिए भी लिखि जाती हैं. इस Information को Meta Data या Meta Information कहते हैं. और Meta Data को HTML Meta Tags द्वारा Define किया जाता हैं.

इस Tutorial में हम आपको HTML Meta Tags के बारे में पूरी जानकारी देंगे. Meta Element को आसानी से समझने के लिए हमने इस Tutorial को निम्न भागों में विभाजित किया हैं.

Table of Content

1. Meta Tag Introduction in Hindi

2. Meta Tags का महत्व – Importance of Meta Tags

3. General Syntax of Meta Tag

4. Commonly Used Attributes of Meta Tag

5. Defining Meta Tag

o Define Keyword Meta Tag

o Define Description Meta Tag

o Define Viewport

o Define Character Encoding

o Define Page Redirection

6. आपने क्या सीखा?

Meta Tag का परिचय – Meta Tag Introduction in Hindi

HTML Meta Tag द्वारा HTML Document की Meta Information को Define किया जाता हैं. Meta Information Data (Content) के बारे में Data (Information About Content). अगर आसान शब्दों में कहें तो Meta Data एक Webpage के बारे में जानकारी होती हैं. जिसे Search Engines के लिए लिखा जाता हैं.

Meta Data में Document Title, Keywords, Description, Author Information, Last Modified Date आदि को सम्मिलित किया जाता हैं. इसके अलावा भी आप सैंकडों प्रकार का Meta Data एक HTML Document के बारे में Describe कर सकते हैं. इस जानकारी का उपयोग Search Engines हमारे Content को Index और उसको ढूँढने के लिए करते हैं.

Meta Data पाठकों को दिखाई नही देता हैं. इसे केवल Search Engines और Web Browsers द्वारा ही Read किया जा सकता हैं.

Meta Tags का महत्व – Importance of Meta Tags

अभी हमने बताया कि Meta Information हमारे Content को पाठकों के सामने लाने में इस्तेमाल होती हैं. इसके अलावा भी Meta Tags के अन्य महत्वपूर्ण उपयोग हैं, जिनके बारे में नीचे बताया जा रहा हैं.

1. Meta Tag द्वारा Document Title, Content Description (Summary), Keywords, आदि को Define किया जाता हैं.

2. Viewport (Readers को दिखाई देने वाली स्क्रीन) Setting को Meta Tag द्वारा Define किया जाता हैं. /li>

3. Cookies, URLs Redirection आदि को भी Meta Tags द्वारा ही Define किया जाता हैं.

4. Meta Information हमारे वेबपेजों को Index कराने में सहायक हैं.

5. SEO – Search Engine Optimization के लिए भी Meta Data आवश्यक होता हैं.

General Syntax of Meta Tag

नीचे हमने Meta Tag का General Syntax दिया हैं.

Meta Tag एक Empty HTML Tag होता हैं. जिसका कोई साथी Tag यानि Closing Tag नहीं होता हैं. इसमें सिर्फ Opening Tag ही होता हैं. ऊपर जो Syntax दिया गया हैं, हमने अन्य HTML Tag की भांति ही Meta Tag को Define किया हैं. इसमें सारी Information Attributes द्वारा ही Define की जाती हैं.

अगर आप Meta Tags को HTML में इस्तेमाल कर रहे हैं तो आपको इसे Close करने की जरूरत नहीं हैं. और यदि आप XHTML में Meta Tag को Define कर रहे हैं तो इसे Close करना जरूरी हैं.

Commonly Used Attributes of Meta Tag

Meta Element द्वारा Global Attributes और Event Attributes दोनों को Support किया जाता हैं. इनके अलावा कुछ Element Specific Attributes भी हैं, जिनको सिर्फ Meta Element में ही Define किया जाता हैं. जिनकी जानकारी नीचे दी जा रही हैं.

· charset – इसका पूरा नाम Character Setting हैं. इस Attribute द्वारा HTML Document की Character Encoding को Define किया जाता हैं. अगर आप Encoding Define नहीं करते हैं तो Browser Default Encoding को इस्तेमाल करता हैं.

· content – इस Attribute द्वारा name और http-equiv Attributes की Value Define की जाती हैं.

· text – इस Attribute द्वारा Meta Data का नाम Define किया जाता हैं. इसकी संभावित Value application name, author, description, generator, keywords, viewport हो सकती हैं.

· http-equiv – इस Attribute द्वारा Content Attribute द्वारा Define Value के लिए HTTP Header Define किया जाता हैं.

Defining Meta Tags

Meta Tags को हमेशा Webpage के Header में Define किया जाता हैं. Meta Tag का Syntax आप ऊपर जान ही गए हैं. अब हम यहाँ आपको कुछ सामान्य और उपयोगी Meta Tags को Define करने के बारे में जानकारी देंगे.

Define Keyword Meta Tag

Keyword Meta Tag के द्वारा HTML Document से कुछ मुख्य शब्दों को छांटकर यहाँ लिखा जाता हैं. जैसे यह Tutorial Meta Tags के बारे में हैं, तो आप Meta Tag, HTML, Meta Element आदि शब्द छांट सकते हैं. और इन्हे Meta Keywords के रूप में इस्तेमाल कर सकते हैं. Meta Tag को इस प्रकार Define किया जाता हैं.

<!DOCTYPE html>
<html>
<head><meta name=”keyword” content=”meta tag, meta data, meta element”>

</head>
<body>

</body>
</html>

Example को समझिए

Keyword Meta Data Define करने के लिए Meta Tag में name Attribute की Value keyword हैं, और content Attribute द्वारा Keywords को Define किया गया हैं. आप भी इसी तरह अपने HTML Document या फिर Blog Post के लिए Keywords Define कर सकते हैं.

Define Description Meta Tag

Description Meta Tag द्वारा HTML Document के बारे में लिखा जाता हैं. इसे आप Summary भी कह सकते हैं. हमे लगभग 150 शब्दों के भीतर अपने पूरे HTML Document को Describe करना पडता हैं. इस जानकारी को Search Engines अपने Search Engine Result Pages में पाठकों को दिखाते हैं. इसलिए इसे समझदारी से लिखना चाहिए.

<!DOCTYPE html>
<html>
<head><meta name=”description” content=”In this tutorial you can learn about HTML Meta Tags.”>

</head>
<body>

</body>
</html>

Example को समझिए

Description Meta Data Define करने के लिए Meta Tag में name Attribute की Value description हैं, और content Attribute द्वारा Description को Define किया गया हैं. आप भी इसी तरह अपने HTML Document या फिर Blog Post के लिए Description Define कर सकते हैं.

Define Viewport

वर्तमान समय Mobile Web का हैं. इसलिए Website/Blog को Mobile Friendly होना जरूरी हैं. जिसमें viewport Value की अहम भूमिका हैं. इससे आप अपनी साईट को प्रत्येक डिवाईस के लिए Responsive बना सकते हैं. जिसे आपके पाठक भी पसंद करेंगे. Viewport को इस प्रकार Define किया जाता हैं.

<!DOCTYPE html>
<html>
<head><meta name=”viewport” content=”width=device-width,intial-scale=1.0″>

</head>
<body>

</body>
</html>

Example को समझिए

Viewport Define करने के लिए Meta Tag में name Attribute की Value viewport हैं, और content Attribute द्वारा Viewport को Define किया गया हैं. जिसमें width को device-width Set किया गया हैं. ताकि हमारी वेबसाईट जिस उपकरण में खुल रही हैं अपने आपको उसी की width के अनुसार Adjust हो जाए. और intial-scale को 1.9 लिखा गया हैं. इससे साईट Zoomable बन जाती हैं.

Define Character Encoding

HTML Document के Character Encoding को Define करने के लिए charset Attribute का इस्तेमाल किया जाता हैं. अगर आप Encoding Set नहीं करते हैं तो ब्राउजर आपके Content को Default Encoding में दिखाता हैं. इसलिए इसे Define करना सही कार्य हैं.

<!DOCTYPE html>
<html>
<head><meta charset=”UTF-8″>

</head>
<body>

</body>
</html>

Example को समझिए

Character Encoding Define करने के लिए Meta Tag में charset Attribute का इस्तेमाल किया जाता हैं और इसकी Value में Character Encoding को लिखा जाता हैं. वर्तमान में UTF-8 सबसे ज्याद प्रचलित Character Encoding हैं. और हमने भी इसी का इस्तेमाल किया हैं.

Define Page Redirection

Page Redirection द्वारा आप पाठक को Landing URL से किसी दूसरे URL पर Redirect कर सकते हैं. मतलब आप उसे एक वेबपते से दूसरे वेबपते पर बिना उसे बताये भेज सकते हैं. इस कार्य के लिए Redirection Meta Data का इस्तेमाल किया जाता हैं.

<!DOCTYPE html>
<html>
<head><meta http-equiv=”refresh” content=”5;url=http://teachask.blogspot.com /”>

</head>
<body>

</body>
</html>

Example को समझिए

Redirection Define करने के लिए Meta Tag में http-equiv Attribute का इस्तेमाल किया जाता हैं और इसकी Value को refresh Define किया जाता हैं. मतलब इस वेबपते को पुन: Load होना हैं. कैसे? इसको content Attribute द्वारा Define किया गया हैं. हमने यहाँ समय 5 सैकण्ड और URL में इसी साईट के होमपेज का पता लिखा है. जब आप इस पेज को अपने ब्राउजर में खोलेंगे तो आप अपने आप 5 सैकण्ड बाद http://teachask.blogspot.comपर Redirect हो जाऐंगे. आप इसी तरह एक URL को दुसरे-तीसरे या अन्य पर Redirect करा सकते हैं.

आपने क्या सीखा?

इस Tutorial में हमने आपको HTML Meta Tags की पूरी जानकारी दी हैं. आपने Meta Tag क्या होता हैं? Meta Tag को Define करने का तरीका, Examples of Meta Tags आदि के बारे में जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

HTML Style Tag in Hindi – Style Element in Hindi.

HTML Style Tag की पूरी जानकारी

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 को हमने निम्न भागों में विभाजित किया है:

Table of Content

1. Style Tag का परिचय – Introduction to Style Tag in Hindi

o Syntax of Style Tag

o Commonly Used Attributes with Style Tag

2. Style Attribute का परिचय – Introduction to Style Attribute in Hindi

o Syntax of Style Attribute

3. HTML Document का Background Change करना

4. HTML Document का Text Color Change करना

5. HTML Document में Font Size Change करना

6. HTML Document में Font Family Change करना

7. HTML Document में Text Alignment Change करना

8. आपने क्या सीखा?

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: यहाँ आप कोई भी 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 कीजिए.

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Example</title></head>
<body style=”background-color:gray;”>

<p>This is Gray Background.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को 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 करते है.

इसे Try कीजिए:

<!DOCTYPE html>
<html>
<head>
<title>HTML Style Example</title><style type=”text/css”>
body {background: gray;}
p {
color: green;
font-size: 25px;
font-family: Verdana;
text-align: center;
}
<style/>
</head>
<body>

<h1>This is Heading.</h1>

<p>This is a Paragraph.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is 25px Green Center Aligned Text .

आपने क्या सीखा?

इस Lesson में हमने आपको HTML Document को Style करने की पूरी जानकारी दी है. आपने जाना है कि HTML Document का Background Change कैसे करते है? Text Color, Font Size, Font Family आदि को कैसे Change किया जाता है? हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.