Introduction To HTML - HTML का परिचय

Introduction To HTML - HTML का परिचय 




    HTML का परिचय - 


    जब भी हमारे सामने  Introduction To HTML आता है तब हमारे दिमाग में अलग अलग कोडिंग आने लगती है और हमारे समझ में नहीं आता है की इसे हम कैसे समझे तो आज की इस पोस्ट में आपको Introduction To HTML के बारे में बिस्तार से बताऊंगा Introduction To HTML क्या है और इसे कैसे सीखे, बहुत ही आसान है इसे सीखना बस दिल से इस पोस्ट को आपको देखना पड़ेगा फिर सारी प्रॉब्लम सोल्व हो जाएगी  

    आप जानते हैं कि इंटरनेट कंप्यूटर का एक बहुत बड़ा नेटवर्क है। इंटरनेट पर आपके द्वारा देखी जाने वाली जानकारी सर्वर से प्राप्त होती है। एक सर्वर इंटरनेट पर एक कंप्यूटर है जो हमारा अनुरोध प्राप्त करता है और वेबसाइटों के रूप में हमारे कंप्यूटर में वापस जानकारी भेजता है।


    एक वेबसाइट वेब पृष्ठों का एक संग्रह है जो HTML भाषा में लिखा जाता है और आप वेब ब्राउज़र (INTERNET EXPLORER, GOOGLE CHROM, आदि) का उपयोग करके उन्हें एक्सेस करते हैं।


    HTML LANGUAGE - 


    HTML का मतलब Hypertext Markup Language है, यह टिम बर्नर्स ली द्वारा सर्न, स्विटज़रलैंड में कण भौतिकी के लिए यूरोप प्रयोगशाला में विकसित किया गया था। यह वेब पेज लिखने के लिए सबसे अधिक इस्तेमाल की जाने वाली भाषा है। यह एक PROGRAMING LANGUAGE नहीं है, बल्कि एक MARKUP LANGUAGE है।


    HTML दस्तावेज़ को बहुत अलग क्षमताओं के विभिन्न वेब ब्राउज़र द्वारा देखा जा सकता है। इसका मतलब है कि HTML निर्देश किसी दस्तावेज़ के पाठ को तत्वों में विभाजित करता है। यह एक बहुत ही सरल भाषा है और संवेदनशील मामला नहीं है। शुरू करने के लिए, HTML दो मुख्य उपकरण आवश्यक हैं- एक HTML EDITOR और एक WEB BROWSER


    क्या आप जानते है -

    WWW (WORLD WIDE WEB) का आविष्कार भी टिम बर्नर्स ने किया था और उन्हें वेब के आविष्कारक के रूप में जाना जाता है।


    HTML EDITOR - 


    HTML EDITOR हमें HTML DOCUMENT बनाने की अनुमति देता है। HTML संपादकों के दो प्रकार हैं: WYSIWYG (WHAT YOU SEE IS WHAT YOU GET) और SIMPLE TEXT EDITOR

    WYSIWYG संपादकों में, HTML टैग्स को जाने बिना एक वेब पेज जल्दी से बनाया जा सकता है क्योंकि यह GRAPHICAL INTERFACE प्रदान करता है जबकि TEXT में HTML TAGS के ज्ञान की आवश्यकता होती है।


    MICROSOFT FRONT PAGE AND ADOBE DEAMWEAVER दो सबसे लोकप्रिय WYSIWNG HTML EDITOR हैं और NOTEPAD और WORDPAD सरल-पाठ संपादकों के उदाहरण हैं। आप आमतौर पर HTML कोड को नोटपैड में लिखते हैं और इसे .html एक्सटेंशन के साथ सेव करते हैं।



    WEB BROWSER - 


    वेबपेज देखने के लिए एक वेब ब्राउजर का उपयोग किया जाता है जिसका अर्थ है HTML DOCUMENTINTERNET EXPLORER और GOOGLE CHROME दो सबसे लोकप्रिय वेब ब्राउज़र हैं।

    Introduction To HTML
    Introduction To HTML



    HTML Elements, Tags and Attributes - 


    HTML निर्देश किसी DOCUMENT के TEXT को तत्वों नामक खंडों में विभाजित करता है और इन तत्वों को HTML TAG द्वारा पहचाना जाता है। सभी HTML TAG हमेशा LESS THEN SIGN < और GREATER THAN SIGN > के साथ शुरू होते हैं। 

    उदाहरण के लिए  - <HTML>....</ HTML>, <BODY>... </BODY >, आदि।


    चार्ट में दिखाए गए टैग सामान्यतः HTML DOCUMENT में दिखाई देते हैं।


    Introduction To HTML
    Introduction To HTML


    प्रत्येक TAG में विभिन्न विशेषताएं होती हैं जो किसी तत्व की अतिरिक्त जानकारी को परिभाषित करती हैं। 

    उदाहरण के लिए, एक फल में विभिन्न गुण होते हैं जैसे मीठा, खट्टा, आदि। 

    इसी प्रकार एक TAG में COLOR, VALUE, FONT आदि जैसी विभिन्न विशेषताएँ होती हैं।

    यहाँ दिखाए गए अनुसार TAG नाम के साथ विशेषताएँ दी जा सकती हैं



    <BODY BGCOLOR = "Green">

    ⇩                       ⇩

    Attribute       Attribute Value


    HTML TAGS के प्रकार - 

    HTML TAGS 2 प्रकार के होते है - 

    CONTAINER TAG - 

    एक TAG को एक CONTAINER TAG कहा जाता है यदि यह उसके साथी TAG के साथ है, अर्थात, उनके पास एक Start Tag और एक End Tag होना चाहिए, End Tag एक बैकस्लैश (/) के साथ Start Tag के समान है।

    उदाहरण के लिए, <BODY> Tag को इसके भागीदार Tag </ BODY> के साथ Tag किया गया है, ये Tag Container Tag भी हैं।


    EMPTY TAGS -

    एक TAG को एक EMPTY TAG कहा जाता है यदि उसे साथी TAG की आवश्यकता नहीं होती है, यदि उसमें केवल एक प्रारंभ टैग होता है।

    For Example - <BR> Tag, जिसका उपयोग लाइन ब्रेक डालने के लिए किया जाता है।


    Stucture of an HTML Document - 

    एक HTML Document में दो अलग-अलग भाग होते हैं, एक HEAD और एक BODY, HTML Document का HEAD वह है जहाँ आप पृष्ठ का Title दर्ज करते हैं, जो पृष्ठ के Title Bar में दिखाई देता है और Text, Graphics, शीर्षकों में प्रवेश करता है, और अधिकांश कार्य आप BODY खण्ड में करते हैं।

    HTML Document का मुख्य भाग <HEAD> Tag से शुरू होता है। यह तत्व आपके HTML Document की शुरुआत की पहचान करता है (<HTML> सबसे पहले यह केवल ब्राउज़र को यह बताता है कि फ़ाइल में HTML CODE है, <TITLE> Tag यह निर्धारित करता है कि Browser Title Bar में क्या प्रदर्शित किया जाएगा, और Document का मुख्य भाग यह वेब में दिखाई नहीं देता है। 

    आप Web Browser Title Bar में प्रदर्शित करने के लिए Text बनाएंगे, Page का HEAD बनाने और Page को Title देने के लिए निम्न Tag टाइप करें।


    <HEAD>

    <TITLE>This is my first page </Title>

    </Head>

    यह एक Web Browser को बताता है कि दी गई जानकारी को Document के HEAD हिस्से में माना जाना चाहिए और एक Title के रूप में प्रदर्शित किया जाना चाहिए।

    आपको Document की शुरुआत में एक Tag <HTML> और Document के अंत में </ HTML> जोड़ना होगा।

    अब HEAD TAG (</ HEAD> के बाद आप BODY SECTION शुरू करेंगे)।

    <BODY>

    इन दो Tag के बीच आप अपने WEB PAGE का कोड टाइप करेंगे।




    BASIC HTML TAGS - 

    HTML TAG - 

    यह एक CONTAINER तत्व है, जिसे <HTML> द्वारा आरंभ किया गया है और </ HTML> द्वारा समाप्त किया गया है, यह Document को HTML DOCUMENT के रूप में परिभाषित करता है, यह दस्तावेज़ की उपस्थिति को प्रभावित नहीं करता है, लेकिन ब्राउज़र को बताता है कि वर्तमान DOCUMENT एक HTML DOCUMENT है, HTML TAG में HEAD और BODY TAG शामिल हैं, जो आगे कई अन्य TAG शामिल कर सकते हैं।

    Syntax - <HTML>........</HEAD>


    HEAD TAG -


    यह एक CONTAINER TAG है, जिसे <HEAD> द्वारा आरंभ किया गया है और </ HEAD> द्वारा समाप्त किया गया है, यह HTML DOCUMENT HEADER को परिभाषित करता है, जिसका अर्थ है कि यह DOCUMENT के बारे में जानकारी प्रदर्शित करता है, यह ब्राउज़र में दस्तावेज़ की उपस्थिति को प्रभावित नहीं करता है।

    Syntax - <HEAD>.....</HEAD>


    TITLE TAG - 

    यह एक CONTAINER TAG है, जिसे <TITLE> द्वारा शुरू किया गया और </ TITLE> द्वारा समाप्त किया गया, इसके अंदर लिखा गया TEXT, केवल BROWSER WINDOW के ऊपर, अर्थात् TITLE BAR पर दिखाई देता है।

    Syntax - <TITLE>....</TITLE>


    BODY TAG - 

    यह एक कंटेनर टैग है, जिसे <BODY> द्वारा शुरू किया गया है और </ BODY> द्वारा समाप्त किया गया है, इसमें आपके वेब पेज की मुख्य सामग्री शामिल है।

    Syntax - <BODY>.....</BODY>


    CREATING AND SAVING HTML DOCUMENT - 

    एक HTML DOCUMENT का निर्माण काफी सरल और सीखने में आसान है। 

    एक साधारण वेब पेज बनाने के लिए नीचे दिए गए चरणों का पालन करें।

    1 - सबसे पहले स्टार्ट में जा कर सर्च बार में NOTEPAD टाइप करे, फिर NOTEPAD पर क्लिक करके ओपन करे।


    Introduction To HTML
    Introduction To HTML





    2 - BASIC HTML STRUCTURE - 



    <HTML>

               <HEAD>

                             <TITLE><TITLE><HEAD>

               <BODY>

               <BODY>

    <HTML>



    NOTEPAD में दिखाए गए अनुसार संरचना का प्रकार - 


    Introduction To HTML
    Introduction To HTML


    3 - अब, FILE MENU का चयन करें और Save As विकल्प पर क्लिक करें, Save As डायलॉग बॉक्स दिखाई देता है, इच्छित स्थान चुनें और .html एक्सटेंशन के साथ फ़ाइल नाम बॉक्स दर्ज करें।


    4 - फाइल को सेव करने के लिए सेव बटन पर क्लिक करें, फ़ाइल वांछित स्थान पर सहेजी जाएगी, फ़ाइल नाम से पहले आइकन पर ध्यान दें।


    Viewing an HTML Document - 

    HTML DOCUMENT देखा जा सकता है किसी भी वेब ब्राउज़र जैसे Internet Explorer या Google Chrome ब्राउज़र के साथ फ़ाइल खोलने के लिए, पहले उस स्थान पर जाएँ जहाँ आपने फ़ाइल को सहेजा है और फ़ाइल पर खोलने या राइट-क्लिक करने के लिए उस पर डबल-क्लिक करें और ओपन विकल्प का चयन करें।

    फ़ाइल दिखाए गए अनुसार ब्राउज़र में खुल जाएगी।


    Introduction To HTML
    Introduction To HTML


    आपने HTML DOCUMENT के मूल के बारे में जान लिया है, अब हम कुछ अन्य टैग और विशेषताओं के साथ आगे बढ़ते हैं जो आपको एक अच्छी तरह से व्यवस्थित और आकर्षक वेब पेज बनाने में मदद करेंगे और साथ ही साथ आपको HTML कोडिंग को बेहतर समझने में मदद करेंगे।


    Heading Tag - 

    Document हमेशा Heading से शुरू होता है, आप अपने शीर्षकों के लिए विभिन्न आकारों का उपयोग कर सकते हैं, HTML में शीर्षकों के छह स्तर भी हैं, जो तत्वों का उपयोग करते हैं <h1>, <h2>, <h3>, <h4>, <h5>, और <h6>

    किसी भी हेडिंग को प्रदर्शित करते समय, ब्राउज़र एक हेडिंग से पहले एक लाइन और उसके बाद एक लाइन जोड़ता है।


    Example - 


    Introduction To HTML
    Introduction To HTML


    Paragraph Tag - 


    <P> Tag आपके पाठ को अलग-अलग पैराग्राफ में बनाने का एक तरीका प्रदान करता है, पाठ के प्रत्येक पैराग्राफ को एक </ P> Tag के बीच जाना चाहिए।


    Introduction To HTML
    Introduction To HTML






    Line Break Tag - 


    जब भी आप <br> तत्व का उपयोग करते हैं, तो अगली पंक्ति से कुछ भी शुरू होता है, यह टैग एक खाली तत्व का एक उदाहरण है, जहां आपको टैग खोलने और बंद करने की आवश्यकता नहीं है, क्योंकि उनके बीच में जाने के लिए कुछ भी नहीं है।


    Introduction To HTML
    Introduction To HTML



    Horizontal Lines -


    क्षैतिज रेखा का उपयोग किसी दस्तावेज़ के अनुभागों को देखने के लिए किया जाता है, <hr>tag Document में वर्तमान स्थिति से सही मार्जिन तक एक रेखा बनाता है और तदनुसार रेखा को तोड़ता है।



    Introduction To HTML
    Introduction To HTML



    Bold, Italic, and Underline - 


    किसी शब्द को बोल्ड करने के लिए <B> TAG का उपयोग करें।
    किसी शब्द का उपयोग करने के लिए <I> TAG का उपयोग करें।
    किसी शब्द के उपयोग को रेखांकित करने के लिए <U> TAG



    Introduction To HTML
    Introduction To HTML


    Strike Text - 


    <Strike> ... </ Strike> तत्व के भीतर जो कुछ भी दिखाई देता है वह एक स्ट्राइकथ्रू के साथ प्रदर्शित होता है, जो नीचे Text के बीच से एक पतली रेखा है।



    Introduction To HTML
    Introduction To HTML


    Superscript Text - 


    <sup> ... </ sup> तत्व की सामग्री सुपरस्क्रिप्ट में लिखी गई है; उपयोग किया जाने वाला फ़ॉन्ट आकार, उसके चारों ओर के वर्णों के समान आकार है, लेकिन अन्य वर्णों के ऊपर वर्ण की ऊँचाई आधी प्रदर्शित कर रहा है।



    Subscript Text - 


    एक <sub> ... </sub> की सामग्री सबस्क्रिप्ट में लिखी गई है, वर्णों को अन्य वर्णों से आधे वर्ण की ऊँचाई प्रदर्शित की जाती है।


    Introduction To HTML
    Introduction To HTML



    ATTRIBUTES - 


    आपने कुछ HTML टैग और उनके उपयोग जैसे Heading Tag <h1>, <h2>, Paragraph Tag <p> और अन्य Tag देखे हैं, हमने उन्हें अब तक उनके सबसे सरल रूप में उपयोग किया है, लेकिन अधिकांश HTML Tag में विशेषताएँ भी हो सकती हैं, जो जानकारी के अतिरिक्त टुकड़े हैं।

    HTML तत्व की विशेषताओं को परिभाषित करने के लिए एक विशेषता का उपयोग किया जाता है और इसे तत्व के शुरुआती Tag के अंदर रखा जाता है,
    सभी विशेषताएँ दो भागों से बनी होती हैं: A NAME और A VALUE:

    • NAME वह property है जिसे आप सेट करना चाहते हैं। उदाहरण के लिए, paragraph <P> के तत्व उदाहरण में एक विशेषता रखते हैं जिसका नाम संरेखित है, जिसका उपयोग आप पृष्ठ पर पैराग्राफ के संरेखण को इंगित करने के लिए कर सकते हैं।


    • VALUE वह है जो आप चाहते हैं कि संपत्ति का मूल्य निर्धारित किया जाए और हमेशा उद्धरणों के भीतर रखा जाए।

    ATTRIBUTE NAME और ATTRIBUTE VALUE  मामला-संवेदी हैं।





    TABLE OF ATTRIBUTE - 



    Introduction To HTML
    Introduction To HTML


    Align Attribute - 


    नीचे दिए गए उदाहरण में Align Attribute के तीन संभावित मान हैं: 
    left, center और right.


    Introduction To HTML
    Introduction To HTML



    Using Body Tag and its Attributes - 


    डिफ़ॉल्ट रूप से, Text को White Background के साथ Black color में लिखा गया है, Body tag में कई विशेषताएं हैं, इसका उपयोग करके हम वेब पेज की उपस्थिति बदल सकते हैं।

    आमतौर पर उपयोग किए जाने वाले कुछ Attributes नीचे वर्णित हैं।


    BGCOLOR Attribute - 


    इसका उपयोग वेब पेज की Background का रंग बदलने के लिए किया जाता है, रंग का VALUE रंग NAME या हेक्साडेसिमल कोड के रूप में दिया जा सकता है।

    Sayntax - <BODY BGCOLOR="Color Name">



    For Example - 


                            <BODY BGCOLOR="GREEN">
    OR
                            <BODY BGCOLOR="#008000">

    आमतौर पर उपयोग होने वाले कलर और उनके हेक्साडेसिमल कोड का नाम इस प्रकार हैं।


    Introduction To HTML
    Introduction To HTML





    Introduction To HTML
    Introduction To HTML


    Font - 


    Font Size - 


    आपके पास अपने पाठ का आकार सेट करते समय दो विकल्प हैं: इसे बिल्कुल या अपेक्षाकृत आकार देना, निरपेक्ष आकार सीमा 1 और 7 के बीच है, और इस तरह सेट हैं - 

    <font size="2">text</font>

    अधिकांश ब्राउज़रों का डिफ़ॉल्ट फ़ॉन्ट आकार 3 के रूप में सेट किया गया है, अधिकांश साइटों पर उनके पाठ का आकार लगभग 2 या 3 होगा।

    सापेक्ष आकार का अर्थ है कि पाठ उपयोगकर्ता के डिफ़ॉल्ट आकार के अपेक्षाकृत आकार का होगा, यह बेहतर है क्योंकि यह आपके उपयोगकर्ता के प्रदर्शन के लिए अनुकूल है, यदि उपयोगकर्ता ने विशेष रूप से अपने ब्राउज़र को बड़ा पाठ प्रदर्शित करने के लिए सेट किया है, तो सामान्य, पाठ अनुपात में चमक जाएगा, Range +6 से +1 और -1 से -6 के बीच है। 

    इन दो आकारों के शॉर्टकट, टैग हैं - <big></big> और <small></small>


    <font size="+1">ब्राउजर के डिफॉल्ट से एक साइज बड़ा टेक्स्ट.</font>


    छोटे पाठ से बचें, क्योंकि इसे पढ़ना हमेशा कठिन होता है, बड़ा परीक्षण एक पृष्ठ को झुका सकता है और बहुत अधिक स्क्रॉलिंग प्रेरित कर सकता है, एक समय में एक पृष्ठ पर कितना पाठ होने वाला है, इसके लिए फ़ॉन्ट आकार की पसंद का बहुत कुछ होगा।


    Font Face - 


    डिफ़ॉल्ट रूप से Text इस तरह दिखेगा:

    12pt Black Times New Roman

    इंटरनेट पर सबसे आम फोंट में से एक एरियल है। एरियल, या किसी अन्य फॉन्ट में टेक्स्ट बदलने के लिए, टैग हैं - 

    <font face=''Arial"> YOUR TEXT HERE.</FONT>

    Face की विशेषता को नाम दिया गया था क्योंकि फ़ॉन्ट डिज़ाइन अधिक सटीक रूप से टाइपफेस के रूप में जाने जाते हैं।


    Basefont - 



    Document में सभी Text के लिए <besefont> Tag एक डिफ़ॉल्ट Text-Color, Font-Size या Font-Family निर्दिष्ट करता है।


    Introduction To HTML
    Introduction To HTML






    TEXT Attribute - 


    इसका उपयोग वेब पेज के टेक्स्ट का रंग बदलने के लिए किया जाता है। रंग का Value रंग Name या Hexadecimal कोड के रूप में दिया जा सकता है।

    Syntax - <BODY TEXT="COLOR NAME">

    FOR EXAMPLE -

     
    <BODY Text="Yellow">
    OR
    <BODY Text="#ffff00">


    LEFT MARGIN ATTRIBUTE - 


    इसका उपयोग वेब पेज बनाते समय पाठ के बाएं मार्जिन को सेट करने के लिए किया जाता है। यह एक संख्यात्मक मान लेता है और इसकी इकाई पिक्सेल है।
    Syntax - <BODY LEFTMARGIN="Numeric Value">

    FOR EXAMPLE - 

    <BODY LEFTMARGIN="75">



    TOPMARGIN Attribute - 


    इसका उपयोग वेब पेज बनाते समय पाठ के Top मार्जिन को सेट करने के लिए किया जाता है। यह एक संख्यात्मक मान लेता है और इसकी इकाई पिक्सेल है।
    Syntax - <BODY TOPMARGIN="NUMERIC VALUE">

    FOR EXAMPLE - 
    <BODY TOPMARGIN="45">


    Tag Attribute का उपयोग कभी भी साथी Tag के साथ नहीं किया जाता है जिसका अर्थ है कि आप उन्हें शुरुआती Tag प्रदान करते हैं।

    अब, हम इन Attribute के उपयोग को देखने के लिए एक उदाहरण लेते हैं। नोटपैड में निम्न कोड का प्रकार और .html एक्सटेंशन के साथ अपनी फ़ाइल को सेव करे।


    Introduction To HTML
    Introduction To HTML



    Inserting Horizontal Line - 


    आपने <HR> TAG के बारे में सीखा। इसका उपयोग Document Window में एक क्षैतिज रेखा खींचने के लिए किया जाता है जो पृष्ठ को क्षैतिज खंडों में विभाजित करता है। यह एक महत्वपूर्ण टैग है।

    Syntax - <HR>


    Introduction To HTML
    Introduction To HTML



    दोस्तों आशा करता हु की आपको Introduction To HTML - HTML का परिचय अच्छे से समझ में आ गया होगा अगर आपको कोई परेशानी हो रही ही हो तो कमेंट जरुर करे आपको आपको जवाब जरुर दूंगा.
    और इसी तरह की पोस्ट के लिए इस ब्लॉग को जरुर फॉलो करे.

    धन्यवाद 
    Previous Post
    Next Post

    मै इस ब्लॉग का लेखक और मालिक हु, आपको मै इस ब्लॉग पर कंप्यूटर के बारे में और उसके कोर्स के बारे में सारी जानकारी दुंगा

    Related Posts

    0 Comments:

    एक टिप्पणी भेजें

    अपना सुझाव दे