एचटीएमएल बेसिक्स - एचटीएमएल टैग्स एचटीएमएल के प्रमुख सिद्धांत एचटीएमएल वेब पेज डिजाइन करना
यदि आप अपना स्वयं का वेब पेज डिजाइन करने की सोच रहे हैं तो आप सही जगह आ गए हैं । इस लेख में हम आपको स्टेप बाय स्टेप समझाएंगे कि आप अपनी पसंद का सुंदर और आकर्षक वेब पेज कैसे डिजाइन कर सकते हैं? वेब पेज डिजाइनिंग के साथ ही हम एचटीएमएल कोड एचटीएमएल टैग तथा ब्राउज़र के बारे में आने वाली समस्याओं के बारे में भी समझाएंगे ।
 |
| HTML Basics- Main Principles of HTML |
इससे पहले कि आप अपना वेब पेज बनाना शुरू करें, आपको अपने दिमाग में एक नक्शा बनाना पड़ेगा कि आप किस तरह का वेब पेज डिजाइन करना चाहते हैं । यानी आपको अपने वेबपेज का लेआउट सबसे पहले अपने दिमाग में तय करना होगा। आप चाहे तो इसके लिए कागज और पेंसिल की मदद से एक रफ स्केच पहले तैयार कर ले और वह सभी एलिमेंट नोट करें जो आप अपने वेबपेज में शामिल करना चाहते हैं । यानी कोडिंग शुरू करने से पहले आपके सपनों के वेब पेज का डिजाइन अपने दिमाग में बनाएं और फिर उसको कागज पर उतार ले उसके बाद कोडिंग का नंबर आता है ।
Related - क्या आपकी कॉल रिकॉर्ड हो रही है? ऐसे करें चेक और इससे बचाव
एक बार जब आपने अपनी वेबसाइट का नक्शा अपने दिमाग में और पेपर पर बना लिया तो अब समय है एचटीएमएल कोडिंग से अपना वेब पेज बनाने का । आपको एचटीएमएल टैग्स की मदद से अपने दर्शकों के वेब ब्राउज़र को इस तरह निर्देशित करना है कि आपके टेक्स्ट, इमेजेस और लिंक्स को देखने में आपके दर्शकों को बहुत आसानी हो । मान लीजिए आप अपने वेब पेज के बाई तरफ एक इमेज दिखाना चाहते हैं कुछ शब्द बोल्ड(Bold) दिखाना चाहते हैं तथा कुछ बाहरी स्रोतों को लिंक करना चाहते हैं तो इन सब के लिए आपको एचटीएमएल टैग्स सेट करने की जरूरत पड़ेगी ।
Related - What is DND howactivate DND to block unwanted calls how to deactivate DND
एचटीएमएल टैग्स के 5 महत्वपूर्ण नियम है जिन्हें आपको जानने की जरूरत है ।
1. टैग हमेशा कोणीय कोष्ठक(Angular Brackets) (इन्हेंless-than औरreater-than साइन भी कहा जाता है) से घिरा होता है । उदाहरण के लिए HEAD टैग इस तरह लिखा जाता है <HEAD> ।
2. अधिकांश टैग जोड़े में होते हैं । इन्हें ओपनिंग टैग और क्लोजिंग टैग कहा जाता है तथा कई बार आम बोलचाल की भाषा में लोग स्टार्टिंग टैग और एंडिंग टैग भी कहते हैं । टैग उनके द्वारा प्रभावित सामग्री को घेरे रहते हैं अर्थात इनसे प्रभावित सामग्री दोनों टैगों के बीच में होती है। वे एक प्रकाश स्विच की तरह काम करते हैं: पहला टैग कार्रवाई को चालू करता है, और दूसरा इसे बंद कर देता है। (इसके कुछ अपवाद भी हैं। उदाहरण के लिए, <BR> टैग एक लाइन ब्रेक बनाता है और इसमें "क्लोजिंग टैगClosing Tag" नहीं होता है । इसे रिक्त टैगEmpty Tag भी कहा जाता है
3. दूसरा टैग - "क्लोजिंग टैगClosing Tag" है । क्लोजिंग टैग हमेशा स्लैशslash से शुरू होता है । उदाहरण के लिए, आप को टैक्सट को बोल्ड करने के लिए टेक्स्ट के शुरू में <B> टैग का इस्तेमाल करना पड़ेगा और पूरा टेक्स्ट लिखने के बाद फिर क्लोजिंग टैग </B> लिखना पड़ेगा। यहां <B> ओपनिंग टैग है तथा </B> क्लोजिंग टैग । एक उदाहरण देखिए <B>प्रभावित सामग्री दोनों टैगों के बीच में होती है</B> । यहां <B> और </B> के बीच का टेस्ट बोल्ड दिखाई देगा
Related - How to create related posts widget in blog template ब्लॉग टेम्पलेट में रिलेटेड पोस्ट विजेटकैसे बनाएं
4. हमेशा पहले ओपनिंग टैग तथा अंत में क्लोजिंग टैग आता है। टैग एम्बेड किए गए होते हैं । एक के भीतर भी दूसरा टैग इस्तेमाल किया जा सकता है लेकिन इसके लिए जब आप किसी टैग के भीतर एक टैग शुरू करते हैं, तो आपको ध्यान रखना पड़ेगा कि बाहरी टैग को बंद करने से पहले उस आंतरिक टैग को बंद करना होगा। उदाहरण के लिए, नीचे दिया गया क्रम गलत है -
<HEAD> <TITLE> आपका टेक्स्ट </HEAD> </TITLE>।
यहां आउटर टैग <HEAD> है और इनर टैग है <TITLE> इस लिए पहले क्लोजिंग टाइटल</TITLE> टैग लगेगा उसके बाद क्लोजिंग </HEAD> टैग लगेगा
सही क्रम इस प्रकार होगा
<HEAD> <TITLE> आपका टेक्स्ट </TITLE> </HEAD>।
इसका एक फार्मूला याद रखना पड़ेगा "string में जो टैग सबसे पहले ओपन हुआ है वह सबसे अंत में बंद होगा" ।
Related - हिंदी-व्हाट्सएप के टॉप टिप्स और ट्रिक्स खास फीचर्स जो आपको जानना जरूरी है
5. कई टैग में वैकल्पिक विशेषताएँ होती हैं जो टैग के व्यवहार को संशोधित करने के लिए मूल्यों का उपयोग करती हैं। उदाहरण के लिए <P>(पैराग्राफ) टैग की विशेषता है कि पैराग्राफ डिफ़ॉल्ट रूप से बाएं Align होगा, लेकिन आपको डिफ़ॉल्ट (बाएं) पैरा ALIGN को बदलने की सुविधा है। उदाहरण के लिए, <PALIGN = CENTER> इस्तेमाल करने से इसके बाद वाला पैराग्राफ सेंट्रल लाइन हो जाएगा तथा <PALIGN = RIGHT> इस्तेमाल करने से पृष्ठ पर अगला पैराग्राफ राइट अलाइन हो जाएगा ।
कृपया यह भी याद रखें एचटीएमएल दिन प्रतिदिन विकसित हो रहा है इस कारण ब्राउज़र के पुराने संस्करण नवीनतम टैग को सपोर्ट नहीं करते । ऐसी स्थिति में जब कोई पुराना ब्राउज़र नवीन टैग को समझ नहीं पाता है उस स्थिति में टैग और उससे प्रभावित होने वाली सामग्री सभी को अनदेखा कर देता है । इस तरह, नए एलिमेंट दर्शकों को नए ब्राउज़रों के साथ तो सही दिखाई देंगे, जो पुराने ब्राउज़रों का उपयोग करने वाले दर्शकों के लिए समस्या पैदा करेंगे, जो केवल उन सामग्रियों को देखेंगे जो उनके ब्राउज़र को पहचानते हैं।
Related - How to fix slow lagging PC laptop running Windows 10 in 5 minutes
इसका नकारात्मक पक्ष यह है कि, ब्राउज़र अपरिचित कोड की तरह कोडिंग त्रुटियों का इलाज करते हैं। यदि आपने अपना पृष्ठ बनाते समय कोई गलती की है, तो आवश्यक नहीं कि आपको error मैसेज आवश्यक रूप से बल्कि होगा यह कि आप बस कुछ भी नहीं देख सकेंगे। आपको ब्राउज़र में हमेशा अपने सभी पृष्ठों की बारीकी से जाँच करनी चाहिए ताकि यह सुनिश्चित हो सके कि वहाँ होने वाली हर चीज़ ठीक से दिखाई दे। हम आपके पृष्ठों को नेविगेटर और इंटरनेट एक्सप्लोरर (पीसी और मैक दोनों प्लेटफार्मों पर, यदि संभव हो) के एक से अधिक संस्करण में देखने और टेस्ट करने की सलाह देते हैं, जिससे यह सुनिश्चित किया जा सके कि सब कुछ वैसा ही दिखता है जैसा कि आप चाहते हैं, क्योंकि प्रत्येक ब्राउज़र या ब्राउज़र के विभिन्न संस्करण समान व्यवहार नहीं करते है।
Related - Major security privacy differences between signal, whatsapp, telegram
हमारे वेब पेज पर विजिट करने के लिए बहुत-बहुत धन्यवाद । आप हमसे विषय में किसी भी समय हमारी पोस्ट पर कमेंट के जरिए या हमारे होम पेज पर मौजूद कॉन्टैक्ट फॉर्म के जरिए संपर्क कर सकते हैं । अगर आप हमसे संपर्क करेंगे तो हमको अति प्रसन्नता होगी । धन्यवादHtml,
html css, html tutorial for beginners, html for beginners, html tutorial, learn
html, internet, hyper text markup language, webpage, html5, basic of html, html
programming, what is html in hindi, learn website design, HTML 5 tutorial,
introduction to html, Web Designing Video Tutorial, web programming, basic of html, html
programming, what is html in hindi, learn website design, HTML 5 tutorial,
introduction to html, Web Designing Video Tutorial, web programming