HTML FULL COURSE IN HINDI .

  Html Full Course In Hindi. 

1.COURSE OVERVIEW .

·       हेलो दोस्तों . जैसा कि आपने टाइटल में पढ़ा ही होगा इस आर्टिकल के बारे में . यह आर्टिकल HTML FULL  COURSE in hindi ( फुल  एचटीएमएल कोर्स इन हिंदी ) से रिलेटेड है |

·        इस कोर्स में एचटीएमएल से रिलेटेड पूरा टॉपिक कवर किया जाएगा | इसमें  एचटीएमएल को बेसिक टू एडवांस (basic to advance level ) लेवल तक कवर किया जाएगा |

·        यदि आपने कभी कोई प्रोग्रामिंग लैंग्वेज पड़ी है तो तो अच्छी बात है यह कोर्स आपके लिए और भी आसान हो जाएगा|

·        लेकिन यदि आपने कोई भी लैंग्वेज या प्रोग्रामिंग लैंग्वेज नहीं पड़ी है तो यह आपकी पहली लैंग्वेज हो सकती है | इस कोर्स को पूरा पढ़ने के बाद आप  एचटीएमएल  की (html ) पूरी जानकारी हो जाएगी |

·       इस कोर्स में html को बेसिक से एडवांस लेवल तक बताया जाएगा और वह भी हिंदी आसान भाषा में बताया जाएगा | 

·       इस कोर्स का मेन उद्देश्य यह होगा की  एचटीएमएल  का कोई भी पार्ट ना छोड़ा जाए और सभी टॉपिक को हिंदी आसान भाषा में समझाया जाए 

·       लेकिन फिर भी यदि इस कोर्स से रिलेटेड या HTML से रिलेटेड कुछ आपकी क्यूरी रहती है तो आप बेझिझक कमेंट में बता सकते हैं हम पूरी कोशिश करेंगे कि हम उसका उत्तर दें |

2.WHY WE LEARN HTML .

क्यों सीखना चाहिए एचटीएमएल ?

आपके मन में एक सवाल जरूर आता होगा हम लोग HTML क्यों सीखे हमें क्या जरूरत है HTML  की |

·      . मैं आपको बता दूं कि यदि आप अपनी कोई वेबसाइट बनाना चाहते हैं या आप ब्लॉगर पर पोस्ट लिखना चाहते हैं |

·      या आप वर्डप्रेस पर पोस्ट लिखना चाहते हैं या आप वेब डिजाइनिंग सीखना चाहते हैं या आप यूट्यूब पर VIDEO  बनना चाहते हैं|

·       तो आपको एचटीएमएल की बेसिक नॉलेज होना जरूरी है | यदि आपको एचटीएमएल की नॉलेज नहीं होगी तो आप यह सभी काम सही ढंग से नहीं कर पाएंगे |

·       आप एचटीएमएल सीएसएस सीख कर अपनी एक स्टैटिक वेबसाइट बना सकते हैं और उसे ऑनलाइन ला सकते हैं | 

·      यदि आप इनमें से किसी भी काम को सही ढंग से करना चाहते हैं तो आपको  एचटीएमएल सीखना चाहिए |

 TABLE OF CONTENT .

1.    COURCE OVERVIEW .

2.    WHY WE LEARN HTML .

3.    INTRODUCTION OF HTML.

4.    BRIEF HISTORY OF HTML.

5.    VERSION LIST OF HTML  .

6.    STRUCTURE OF HTML .

7.    BRIEF EXPLAIN OF  HTML STRUCTURE .

8.    CONCLUSION .

9.    NEXT  CHAPTER .

  3 .INTRODUCTON OF  HTML .

HTML का पूरा नाम HYPER TEXT MARKUP LANGUAGE होता है | यह एक केस      इनसेंसेटिव MARKUP LANGUAGE   लैंग्वेज है , एचटीएमएल कोई प्रोग्रामिंग लैंग्वेज नहीं होती है यह एक मार्कब लैंग्वेज है | 

·       एचटीएमएल एक STANDRAD मार्कअप लैंग्वेज है वेब पेज को क्रिएट करने के लिए , एचटीएमएल किसी भी वेब पेज का स्ट्रक्चर डिफाइन करती है|

·        यानी एचटीएमएल के द्वारा किसी भी वेबपेज का स्ट्रक्चर डिफाइन होता है |

·       किसी भी वेबपेज के स्ट्रक्चर से यह आशय होता है की जो वेब पेज में एलिमेंट होंगे वह कहां पर होंगे . 

·       यह वेब पेज का स्ट्रक्चर एचटीएमएल द्वारा बनाया जाता है |

·       इसका यूज वेब पेज को बनाने  के लिए किया जाता है | इसके द्वारा किसी भी प्रकार का प्रोग्रामिंग ऑपरेशन परफॉर्म नहीं किया जा सकता है |

·       इसके द्वारा केवल वेबपेज में एलिमेंट को दिखाने के लिए यूज़ किया जाता है |

·        HTML द्वारा यह निर्धारित किया जाता है की एलिमेंट वेब पेज पर कहां पर दिखाई देगा |

·        HTML एलिमेंट द्वारा वेब पेज का निर्माण किया जाता है, HTML एलिमेंट को  टैग <> द्वारा दिखाया जाता है , इन्हें टैग कहा जाता है |

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

·       ब्राउजर एचटीएमएल एलिमेंट को नहीं दिखाता है उस एचटीएमएल एलिमेंट के अंदर लिखे गए कंटेंट को दिखाता है आउटपुट के रूप में |

·       जैसे : <form >, <p>,<3>,<div>,<span> आदि यह सभी एचटीएमएल एलिमेंट है , इसी तरह HTML में बहुत सारे एलिमेंट होते हैं , इन्हीं एलिमेंट की हेल्प से वेब पेज का निर्माण किया जाता है और वह वेबपेज को किसी ब्राउज़र में ओपन किया जा सकता है |

·       यह बहुत ही साधारण (SIMPLE) वा EASY  लैंग्वेज है | इसे कोई भी बिगनर आसानी से सीख सकता है जिसने इसके पहले कोई भी प्रोग्रामिंग लैंग्वेज या वेब डिजाइनिंग ना पड़ी हो  |

         4.BRIEF HISTORY OF HTML 

· एचटीएमएल को 1991 मे Tim Berners-Lee द्वारा बनाया गया था | लेकिन इसे 1991 मैं ऑफीशियली रिलीज नहीं किया गया था |

·       1995 मे इसे पब्लिश कि या गया था 2.0 वर्जन के रूप में.

·       एचटीएमएल 4.01    अंत में      पब्लिश किया गया था यह एचटीएमएल का मेन वर्जन था |

·       इसी बर्जन के रिलीज के बाद एचटीएमएल पब्लिक में आया था , इस वर्जन तक एचटीएमएल में सभी आवश्यक सुधार किए जा चुके थे .

5.VERSION LIST OF HTML .

·      HTML  1.0 :     1993 में रिलीज किया गया था इसका मेन उद्देश्य इंफॉर्मेशन शेयरिंग और वेब ब्राउज़र द्वारा एक्सेसिबल और रीडेबल होना था लेकिन उस समय ज्यादा डेवलपर वेब डिजाइनिंग , वेबसाइट बनाने में इंटरेस्टेड नहीं थे इसलिए यह वर्जन ज्यादा पॉपुलर नहीं हुआ |

·      Html 2.0  :   1995 में आई एचटीएमएल 2.0 यह   एचटीएमएल 1.0 के सभी टीचर्स को रखती थी और कुछ नए फीचर्स भी इस वर्जन में थे |

·      HTML 3.2 : 1997    में   आया जहां डेव रैगेट ने HTML पेपर ड्राफ्ट पेश किया था इसमें एचटीएमएल की नई फीचर्स को शामिल किया गया था इसके द्वारा वेब डेवलपर को डिजाइन करने के लिए और अधिक फीचर्स प्रोवाइड कराती थी लेकिन इन फीचर्स के द्वारा ब्राउज़र की स्पीड को धीमा कर दिया था |

·      इसके बाद एचटीएमएल 4.01 आता है जो व्यापक रूप से प्रयोग किया जाता था एचटीएमएल 5.0 से पहले एक सफल वर्जन रहा था | HTML 5 को HTML 4.01 के विस्तारित संस्करण के रूप में कहा जा सकता है जो वर्ष 2012 में प्रकाशित हुआ था ।

HTML VERSION LIST

1991        Tim Berners-Lee invented HTML

1993        Dave Raggett drafted HTML+

1995        HTML Working Group defined HTML 2.0

1997         W3C Recommendation: HTML 3.2

1999        W3C Recommendation: HTML 4.01

2000       W3C Recommendation: XHTML 1.0

2008       WHATWG HTML5 First Public Draft

2012        WHATWG HTML5 Living Standard

2014        W3C Recommendation: HTML5

2016        W3C Candidate Recommendation: HTML 5.1

2017         W3C Recommendation: HTML5.1 2nd Edition

2017         W3C Recommendation: HTML5.2

      NOTE : THIS TUTORIAL FOLLOW HTML 5 STANDARD .

HTML का कोड कहां लिखें   (Where to write html code? )  HTML EDITOR . 

·       आप लोग एचटीएमएल का INTRODUCTION  और BRIEF HISTORY OF HTML  आपने जान लिया है , लेकिन एसएचटीएमएल कोड को कहां लिखा जाए और कैसे वेब पेज का स्ट्रक्चर बनाया जाए, इसके लिए

·      किसी भी टेक्स्ट एडिटर का यूज किया जाता है , इस टेक्स्ट एडिटर मैं एचटीएमएल का कोड लिखा जाता है , यह टेक्स्ट एडिटर कोई भी हो सकता है जैसे NOTEPAD , NOTEPAD++, SUBLIME TEXT, ATOM या दूसरे टेक्स्ट एडिटर (TEXT EDITOR ) को भी यूज किया जा सकता है , इन एडिटर में एचटीएमएल का कोड लिखा जाता है |

·      एचटीएमएल का कोड लिखने के बाद उस फाइल को .html या .htm एक्सटेंशन के साथ सेव किया जाता है जब फाइल को इस एक्सटेंशन के साथ सेव  होती है तभी वह फाइल एचटीएमएल फाइल कहलाती है और उस फाइल को किसी भी वेब ब्राउज़र में ओपन करके उसका आउटपुट देखा जा सकता है|

   6. HTML BASIC STRUCTURE . ( बेसिक स्ट्रक्चर ऑफ एचटीएमएल) .

·       < !DOCTYPE html >

·       <html>

·       <head>

·       <title> </title>

·       </head>

·       <body>

·       <tag > content </ tag>

·        <tag > content </ tag>

·        <tag > content </ tag>

·        <tag > content </ tag>

·       </body>      </HTML>

     7. BRIEF EXPLAIN OF  HTML STRUCTURE .

• <html>यह एचटीएमएल का बेसिक स्ट्रक्चर होता है , पूरी एचटीएमएल इसी स्ट्रक्चर के अनुसार ही काम करती है |

• यानी किसी भी वेब पेज को क्रिएट करने के लिए इस स्ट्रक्चर को को फॉलो करना होता है |

•  इस स्ट्रक्चर को स्टेप बाय स्टेप समझते हैं |

• <!doctype html> : यह एक इंफॉर्मेशन के लिए होता है जो यह बताता है    कि document (web page )  एचटीएमएल का कौन सा वर्जन यूज कर रहे हैं | 

• यह टाइप डिक्लेरेशन होता है  डॉक्यूमेंट का |

• <!doctype html> इसका यह अर्थ है कि जो डाक्यूमेंट्स बनाया गया है उसमें html5 को यूज़ किया गया है | पहले एचटीएमएल मैं <doctype>  लिंक की तरह यूज किया जाता था |
• जैसे <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DT      D/xhtml1-transitional.dtd">

       NOTE :     html5  का    सबसे छोटा doctype डिक्लेरेशन है |

•  <doctype> को साधारण भाषा में यह समझा जा सकता है कि यह केवल एक डिक्लेरेशन होता है ब्राउज़र के लिए , जिसके अनुसार ब्राउज़र काम करता है . यदि आपने डॉक्टाइप एचटीएमएल<!doctype html> को स्पेसिफाई किया हुआ है तो ब्राउज़र html5 के स्टैंडर्ड के अनुसार इस डॉक्यूमेंट को ट्रीट करेगा , यानी जितने भी html5 के अनुसार स्टैंडर्ड होंगे वह उस डॉक्यूमेंट में अप्लाई करेगा जिस डॉक्यूमेंट में <!doctype html> स्पेसिफाई होगा |

•  यदि <!doctype html> जिस डॉक्यूमेंट में स्पेसिफाइड नहीं होगा तो उसे ब्राउज़र html5 के पहले वर्जन के अनुसार उसे ट्रीट करेगा , और उसके ही स्टैंडर्ड को डाक्यूमेंट्स में अप्लाई करेगा , इसलिए <doctype> डिक्लेअर करना जरूरी होता है  , इसे एचटीएमएल के शुरू में लिखा जाता है |  

• कुछ दूसरे <doctype> डिक्लेरेशन यह डिक्लेरेशन html5 के पहले डिक्लेअर करने के लिए यूज किए जाते थे |

            1.html 2.0  <doctype > डिक्लेरेशन  .  <!DOCTYPE html PUBLIC "-//IETF//DTD HTML                     2.0//EN">
           2.html 3.2  <doctype>  डिक्लेरेशन  .<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2                   Final//EN"

•  html के पुराने वर्जन में इस तरह से <doctype> को डिक्लेअर किया जाता था | <doctype > डिक्लेरेशन case senstive नहीं होता है | इसे html document के top में लिखा जाता है |

2.<html> : यह रूट एलिमेंट होता है एचटीएमएल page का  पूरे एचटीएमएल का कंटेंट इसी एलिमेंट के अंदर आता है यहां से html कंटेंट स्टार्ट होता है |

Ø                       Ø पूरे एचटीएमएल का  यह  root एलिमेंट होता है पूरे एचटीएमएल page का कोड इसी के अंदर लिखा जाता है |

                  इसमें कुछ अटरीब्यूट्स भी लिखे जाते हैं जो ब्राउज़र को स्टार्ट में ही उस वेब पेज से संबंधित जानकारी देते हैं |

जैसे :

·      Lang  attribute -: यह अटरीब्यूट ब्राउज़र को यह बताता है कि जो डॉक्यूमेंट का कंटेंट है उसकी कौन सी लैंग्वेज है |

·       यानी वह web page किस लैंग्वेज में बनाया गया है | उस वेब पेज की लैंग्वेज क्या है |

·      इस अटरीब्यूट की जो वैल्यू होती है वह वेब पेज की language मानी जाती है |

·      यानी language attribute ब्राउज़र को यह बताता है कि यह web page किस लैंग्वेज में बना है |

·      यानी web page की natural  language   कौन सी  है |

  जैसे :  <html lang=" en"> यह इंग्लिश लैंग्वेज को बता रहा है कि जो वेबपेज बना हुआ है वह इंग्लिश   लैंग्वेज में लिखा गया है , सभी language के लिए अलग-अलग value का यूज़ किया जाता है इसकी पूरी    

· लिस्ट देखने के लिए इस link पर क्लिक करें , इस लिंक में जाकर अलग अलग language के अनुसार   उनके code देखें जा सकते हैं|

https://www.w3schools.com/tags/ref_language_codes.asp

      क्यों लिखना चाहिए  lang attribute ?

·         lang attribute द्वारा वेब पेज की natural language की जानकारी ब्राउज़र को मिल जाती है , जिससे जब किसी client द्वारा कोई क्यूरी की जाती है , तो सर्च इंजन को इस लैंग्वेज प्रेफरेंस के आधार पर रिजल्ट प्रोवाइड करने में हेल्प मिलती है जिससे आर्टिकल या कोई भी साइड की सर्च इंजन  ऑप्टिमाइजेशन(SEO) में हेल्प मिलती है|

·         lang attribute का एडवांटेज यह भी होता है , कि किसी एक लैंग्वेज में लिखा गया कंटेंट , ब्राउज़र को ट्रांसलेट करने का ऑफर देता है जो यूजर के लिए समझना आसान हो जाता है |

·        इसलिए  web page में lang attribute का use जरूर करना चाहिए |

     3.<head> -: 

·       यह html का बहुत ही important element मे से एक होता है| 

·       इस element के अंदर ब्राउज़र तथा सर्च इंजन के लिए इंफॉर्मेशन रहती है , इसमें वेब पेज से रिलेटेड इंफॉर्मेशन होती है|

·       जिसे (meta   data) यानी   (DATA ABOUT DATA )   कहा जाता है |
·       इसमें वेबपेज से रिलेटेड सभी इंफॉर्मेशन स्टोर रहती है , जिसका यूज़ सर्च इंजन और ब्राउज़र करते हैं |
·       इसमें जो भी टैग यूज़ किए जाते हैं उसका आउटपुट web page में दिखाई नहीं देता है.
·       इस के अंदर लिखी गई इंफॉर्मेशन ब्राउज़र और सर्च इंजन के लिए यूज़फुल होती है |
·        इस एलिमेंट के अंदर इंफॉर्मेशन रखने के लिए अलग-अलग tag यूज किए जाते हैं , इन tag के द्वारा ही सर्च इंजन , और ब्राउज़र के लिए इंफॉर्मेशन स्टोर होती है |

      इन टैग की list नीचे हैं |

   <title> :

     ·      इस टैग के अंदर web page का title दिया जाता है , यह टाइटल वेब पेज के top मे  दिखाई देता है |

·       टाइटल tag का यूज़ web page का टाइटल देने के लिए किया जाता है , जब किसी वेबपेज का title दिया जाता है तो वह सर्च इंजन के लिए
·       एक जानकारी होती है जिसके द्वारा सर्च इंजन को उस वेब पेज को रिजल्ट के रूप में दिखाने में मदद मिलती है |
·       और यूजर को आउटपुट के रूप में वे टाइटल दिखता है जो वह सर्च इंजन में सर्च कर रहा है |
·      इस टाइटल tag से ही यूजर को वेब पेज को output के रूप में दिखता है जो उसने  search bar  मे search किया है |
·       title tag भी seo का part होता है इसके द्वारा भी सर्च इंजन result देता है |
·      इसलिए यह tag बहुत ही IMPORTANT होता है WEB DOCUMENTS के लिए |
         SYNTEX : <title> web page title name </title>
                EXA : <title>html full  course in hindi </title>

TITLE  TAG OUTPUT. 

 

 

  

NOTE :  title tag मे लिखा कंटेंट by डिफॉल्ट h1 tag को यूज करता है , यह एचटीएमएल स्टैंडर्ड के   अनुसार होता है |

2.<meta> : 

             

• यह बहुत इंपॉर्टेंट टैग होता है , इस टैग के द्वारा ही सर्च इंजन ऑप्टिमाइजेशन  (SEO)

• और उस वेबपेज से रिलेटेड सभी इंफॉर्मेशन इस टैग में स्टोर रहती है |

•  इस टैग को meta टैग इसीलिए कहा जाता है क्योंकि यह DATA ABOUT DATA रखता है|

•   यानी वेब पेज के डाटा से संबंधित डाटा रखता है|

• जैसे  :  वेब पेज का डिस्क्रिप्शन(DESCRIPTION ) , कीवर्ड (KEYWORD)

• , ऑथर    (AUTHOR),CHARCTER SET ,   VIEW PORT आदि से रिलेटेड  इंफॉर्मेशन रखता है | इसीलिए इसे < META> TAG  कहा जाता है|

 

• EXA :  <meta name=”keyword” description=”free, resume , save ”>

• मेटा टैग में इंफॉर्मेशन अलग-अलग ATTRIBUTE  के द्वारा स्टोर की जाती है   meta tag  में    name     और     content दो अलग-अलग attribute यूज किए जाते हैं ,  अलग-अलग इंफॉर्मेशन के लिए

•  जैसे

•  name attribute के अंदर इनकी वैल्यू के रूप में keyword , description , author ,viewport , आदि को यूज किया जाता है |




• Exa : <meta name =”author” content=” html full course in hindi pdf”>




• content attribute  के अंदर इनकी वैल्यू के रूप में keyword names , web page description , author name , device width   आदि को यूज किया जाता है |

•  जो value name attribute मैं यूज़ की जाती है उसी से रिलेटेड CONTENT अटरीब्यूट को यूज़ किया        जाता है |  

• Exa : <meta name =”author” content=”  html  full  course in hindi pdf”>     

सभी अटरीब्यूट की VALUE की लिस्ट नीचे दी जा रही है |

1.         <meta charset="utf-8" > : charset इसका पूरा नाम charcter set attribute होता है |
2.           इस अटरीब्यूट का यूज html document को encode करने के लिए यूज़ किया जाता है |
3.          जब एचटीएमएल डॉक्युमेंट को सेव किया जाता है तो वह डॉक्यूमेंट मशीन लैंग्वेज 01 की फॉर्म में स्टोर होता है इस कन्वर्सेशन को इनकोडिंग कहा जाता है|
4.           डॉक्यूमेंट इनकोडिंग करने के लिए utf attribute का यूज किया जाता है |
5.           html डॉक्युमेंट को इनकोडिंग डिकोडिंग लिए utf-8 स्टैंडर्ड का यूज किया जाता है |
6.            एचटीएमएल डॉक्युमेंट को इनकोड करना मशीन के लिए,  फिर उसे वापस डिकोड करना यूजर के लिए  जिससे इंफॉर्मेशन सही रहे इसी के लिए UTF-8 का यूज किया जाता है |

Html 5 में यदि  utf  attribute नहीं दीया जाता है तो बाय डिफॉल्ट वह utf-8 स्टैंडर्ड को ही फॉलो करता है |

            2 .KEYWORDS  VALUE  &  CONTENT   VALUE  

        ·       यह  value  वेब पेज के search engine optimization (seo ) के लिए उपयोगी होता है ,|

         ·         इसकी वैल्यू के रूप में उस कीवर्ड का नाम दिया जाता है जिस कीवर्ड के द्वारा वेब पेज को सर्च रिजल्ट के रूप       में दिखाना होता है |

          ·        इसी keywordS के द्वारा ही सर्च इंजन client की query को वेब पेज के रूप में output देता है |

         जैसे : <meta name ="keyword" content ="free ,resume ,save ">

            3 .DESCRIPTION VALUE  &  CONTENT   VALUE  .

• डिस्क्रिप्शन के रूप में इसकी वैल्यू दी जाती है सर्च इंजन वेब पेज को आउटपुट के रूप में दिखाता है |

• उसमें यह डिस्क्रिप्शन लिखी होती है , डिस्क्रिप्शन उस वेबपेज का होता है जिसे सर्च इंजन समझ कर क्यूरी के आधार पर output देता है |

• और और यूजर को डिस्क्रिप्शन दिखाता है | यह seo के लिए बहुत ही important होता है |

              syntex : <meta name="description" content=' html full course pdf in hindi '>

4 . Author VALUE & CONTENT  VALUE  

• इस वैल्यू का यूज़ author के लिए किया जाता है , CONTENT में जो व्यक्ति इस DOCUMENT (WEB PAGE )का मालिक होता है|

•  उसका नाम यहां पर होता है

                  जैसे : - <meta name='author' content='all hindi blog'>

 

     5.VIEWPORT   VALUE & CONTENT VALUE 

• नेम अटरीब्यूट की वैल्यू के रूप में viewport यूज किया जाता है|

•  viewport का यूज़ अलग-अलग डिवाइस के लिए किया जाता है (responsive बनाने के लिए) 

• जैसे moblile device , laptop device , tablet आदि अलग-अलग तरह के डिवाइसों के लिए व्यूपोर्ट का यूज किया जाता है |

• content के अंदर डिवाइस की width और initial-scale=1.0 दिया जाता है |

• viewport: - viewport वह पूरी SCREEN होती है जहां पर web page (DOCUMENT ) दिखाई देता है |

• उस पूरे AREA को VIEWPORT कहा जाता है |

  EXAMPLE :

What Is  initial scale 1.0

 

• इसका मतलब web page के zoom से होता है | जब web page लोड होता है तो उसका zoom कितना होगा |

• यानी उस web page को कितना zoom किया जा सकता है यह initial scale द्वारा निर्धारित होता है | 

• इसका  यूज़ mobile, tablet जैसे डिवाइसों में होता है |

• इसकी by default वैल्यू 1.0 होती है |

NOTE :  लेकिन इस वैल्यू को बढ़ाया भी जा सकता है इसकी मैक्सिमम वैल्यू 10.0 तक हो सकती है , लेकिन इसका कोई वेरीफाई सोर्स नहीं है |

             Syntax: <meta name=”viewport” content=”width=device-width,initial-scale=1.0”>

       5 .http-equiv :    यह content attribute के information  के लिए http header     provide कराता है |

                    

    इसकी वैल्यू इस तरह है|

              1.content-security-policy : यह document के लिए content policyprovide स्पेसिफाई करता है |

          EXA : <meta http-equiv="content-security-policy" content="default-src 'self'">

                  2     .content-type : यह document के लिए charcter encoding specify करता है |

          EXA : <meta http-equiv="content-type" content="text/html; charset=UTF-8">

                  3      .refresh: यह document को autometic दिए गए टाइम में रिफ्रेश करता है (reload ) |

               EXA : <meta http-equiv="refresh" content="300">

                 4     .default-style : यह DEFAULT STYLE SHEET का नाम SET करता है |

              EXA: <meta http-equiv="default-style" content="the document's preferred stylesheet">

 SOME ADVANCE META DATA .

 

1.FACEBOOK META TAG : -  

OG : इसका पूरा नाम OPEN GRAPH PROTOCOL होता है |

इसके द्वारा वेब पेज को फेसबुक में ऐड किया जाता है |

 फेसबुक पेज पर वेब पेज को ऐड करने के लिए OPEN GRAPH PROTOCOL का यूज़ किया जाता है 

    इस META TAG को FACEBOOK द्वारा DEVELOPE किया गया है | इस META TAG में अलग-अलग ATTRIBUTE का यूज़ किया जाता है|

                जैसे:    PROPERTY और CONTENT |

1. PROPERTY ATTRIBUTE : में  उसका नाम दिया जाता है  ,  जैसे og:title , og:image,   og:type , og:url,  og: description  आदि यूज किए जाते हैं |

 इनमें टाइटल यूआरएल , डिस्क्रिप्शन, टाइप और इमेज को प्रॉपर्टी अटरीब्यूट की वैल्यू के रूप में यूज किया जाता है|

SYNTEX : <meta property="og: title">

2.content attribute : इस attribute में property अटरीब्यूट में use किए गए value का content होता है |

जैसे :    property ="og:title" content =" html full course in hindi "

SYNTEX :    < meta property ="og:title" content =" html full course in hindi "/>

2.  twitter meta tag 

• इस metatag का यूज़ twitter के लिए किया जाता है , इस मेटा टैग को twitter द्वारा   डिवेलप किया गया है |
• इसमें name  और  content attribute का यूज़ किया जाता है |
• name attribute का यूज़ meta नेम देने के लिए, और content
• attribute का यूज़ उसका content देने के लिए किया जाता है |

name attribute जैसे twitter:image , twitter:site ,twitter:description , twitter:title twitter:creator को यूज किया जाता है |
SYNYEX : < META NAME="twitter:TITLE" CONTENT ="HTML  FULL  COURSE IN HINDI">

Exa : 

OUTPUT :

यह आउटपुट ब्राउज़र पर दिखाई नहीं देगा | जैसा कि मैंने पहले ही बताया है कि की META TAG BROWSER , SEARCH ENGINE के लिए होता है , यह आउटपुट देखने के लिए वेब पेज को इंस्पेक्ट करना पड़ता है , उसके लिए CHROME CTRL+SHIFT+I  का  USE  किया जाता है  |

{   META TAG END  }

3.<style> : 

•  इस tag का यूज़ html document मे css (case cading style sheet ) लगाने के लिए किया जाता है |
• इसके द्वारा लगी स्टाइलशीटको इंटरनल( internal style sheet ) कहा जाता है | जब वेब पेज लोड होता है तभी इसमें लिखी गई style वेब पेज पर apply हो जाती है |

                  Syntax  : <style>  p{color:red;}   </style>

  4. <link>   :

•  इस tag का यूज़ html document मे external  css (casecading style sheet ) file  को add करने के लिए use किया जाता है |
• इसमें अलग-अलग attribute  का यूज किया जाता है | यह अटरीब्यूट की लिस्ट नीचे दी जा रही है |

         1.href : इसमें उस फाइल का नाम दिया जाता है जिसे डॉक्यूमेंट में लिंक करना होता है |
           Syntax  : <link href=”html course.css”>
        2.rel : यह रिलेशन बताता है जो फाइल लिंक की गई है वह किस से रिलेटेड है जैसे   html या css .
                 Syntax   :  <link rel=”stylesheet”>

  3.media :  media link  करने के लिए यूज़ किया जाता है | यह जब        किसी particular  media  पर style  करना होता है तो इसका यूज किया जाता है |  जैसे  

 all

print
screen
speech
Syntax :   <link media=”screen”>

4. type :  

type यह बताता है कि जो फाइल link की जा रही है वह किस प्रकार की है यानी उसका टाइप किया है |

      जैसे : text/css या javascript .|

     Exa  : <link type=”text/css” rel=”stylesheet” href=”html course.css”>

 

5.<script> : 

•  इस tag का यूज़  html document  में जावास्क्रिप्ट file link  करने के लिए यूज़ किया जाता है |

• जावास्क्रिप्ट फाइल लिंक करने के लिए src  attribute  का यूज किया जाता है |

• इसमें उस जावास्क्रिप्ट फाइल का यूआरएल दिया जाता है जिस जावास्क्रिप्ट फाइल को html document  से link करना होता है |

• इस टैग जावास्क्रिप्ट को डायरेक्ट ( internal ) लिखा जा सकता है जावास्क्रिप्ट लिखने के बाद इस टैग को क्लोज कर दिया जाता है |

 Example   :  link external javascript file :

              <script type="text/javascript" src=”html.js”>    </script>

Example  :     Internal javascript  .

            < script>

                Javascript code .

               </script>

 

6. <base>   : 

•  इस टैग का यूज url स्पेसिफाई करने के लिए किया जाता है |
• इस टैग के अंदर दिए गए url को main (base) मानकर document के सभी url इसी के अंदर find किए जाते हैं |

          इसे head tag के अंदर लिखा जाता है | इसमें दो attribute का यूज जाता है|

 1 .href  : इसके अंदर main url दिया जाता है , जिसके अंदर बाकी दूसरे link और इमेज find करना होता है |

 2. target . जो नया url open होगा वह किस पेज परopen होगा यह निर्धारित (define) करता है|

    Example   : <base href="wwww.allhindi99/programming/ "      target="_blank" >    </base>

 

                { head tag ends }

 

3.   body tag :

•  यह html document का main tag होता है ,इस tag के द्वारा html documentमेबनाए गए tag  का output ( ब्राउज़र ) में दिखाई देता है , सभी टैग body के अंदर आते हैं .

Syntex   :  <body>   start body tag here .

                   <p></p>

                 <h2></h2>

                  </body> close body tag here .

 

4. </html>  :

• जब html  document  (web page) कंप्लीट हो जाता है तो इस root  tag  को close  कर   दिया जाता है |
• पूरा webpage इसी root tag   के अंदर आता है , इस tag  का क्लोजिंग part यह  दिखाता है कि web page  की कोडिंग कंप्लीट हो गई है |
•  
• EXA :

output

8 conclusion: इस आर्टिकल में एचटीएमएल (html) की बेसिक जानकारी दी गई है, इस आर्टिकल को पढ़ने के बाद आपको एचटीएमएल बेसिक पूरी जानकारी हो गई होगी | इस आर्टिकल में एचटीएमएल की पूरी बेसिक जानकारी देने का प्रयास किया गया है , यदि फिर भी कोई जानकारी एचटीएमएल से जुड़ी छूट गई हो 

तो आप comment मे जरूर बताएं , यदि आपका कोई सुझाव या सवाल हो तो कमेंट मे जरूर बताएं|

NEXT CHAPTER .:

  नेक्स्ट आर्टिकल में एचटीएमएल से जुड़े सभी एलिमेंट को बताया जाएगा और एचटीएमएल में यूज होने वाली टर्मिनोलॉजी को भी बताया जाएगा , अगले आर्टिकल से ही एडवांस एचटीएमएल शुरू होगा |