बुधवार, 13 अप्रैल 2016

HTML का परिचय

अब हम वेबसाईट बनाने के लिए इस्तेमाल होने वाली लैंग्वेज की जानकारी लेंगे.  उसे HTML कहा जाता है. इसके लिए हम Notepad ++ इस एडिटर का इस्तेमाल करेंगे. यह एडिटर आप नीचे वाले लिंक से विनामूल्य डाउनलोड कर के इंस्टॉल कर सकते हैं.

https://notepad-plus-plus.org/
नीचे इस एडिटर का इस्तेमाल कर के लिखा हुआ कोड दिखाई देता है.



यह वेब पेज ब्राउजर में खोलने पर ऐसा दिखेगा

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

!DOCTYPE कोड के शुरुआत में लिखा जानेवाला डिक्लेरेशन है. इसका मतलब है की इस पेज पर एक HTML का डॉक्यूमेंट है.
html और /html के दो टॅग में जो भी लिखेंगे उसे HTML डॉक्यूमेंट कहा जायेगा.
head और /head के दो टॅग में HTML डॉक्यूमेंट के बारे में जानकारी लिखी जाती है
title और /title इन दो टॅग में इस वेब पेज का टायटल लिखा जा सकता है. यह टायटल वेबपेज के सबसे उपरी हिस्से में, टैब के एरिया में दिखाई देता है . जब हम एक से जादा टॅब खोलते हैं तो इसी टाइटल को पढ़ कर हम उस पन्ने को पहचान सकते हैं.
body और /body इन दो टॅग में जो भी लिखेंगे उससे वेब पेज का दिखाई देने वाला हिस्सा बनेगा।.
h और /h इन दो टॅग में जो भी लिखेंगे वह बडे अक्षरों में दिखाई देगा. इससे हेडिंग बनती है
p और /p इन दो टॅग से वेबपेज के आर्टिकल का एक पॅराग्राफ बनता है

HTML डॉक्यूमेंट कैसे सेव्ह करना है 


जब आप एडिटर में HTML का कोड लिखेंगे तब आप को उसे सेव्ह करने के लिए .html इस एक्सटेन्शन का इस्तेमाल करना होगा.

उदाहरण के लिए  index.html , home.html , page1.html

जब यह फाइल सेव्ह तब उस फाईल का आईकॉन ब्राउजर के आईकॉन की तरह दिखाई देगा. जब आप इस फाईल पर डबल क्लिक करेंगे तब ब्राउजर में वह पेज खुल जाएगा. ब्राउजर में अगर हिंदी अक्षर दिखाई ना दे रहे हों तो आपको नीचे दिए गए कदम उठाने पड़ेंगे.

ब्राउजर में Encoding के लिए  Unicode (UTF8) यह ऑप्शन चुनिए. उदाहरण के लिए गुगल क्रोम में, उपरी हिस्से के राईट कॉर्नर के आईकॉन पर क्लिक करके More Tools > Encoding > Unicode (UTF8) यह ऑप्शन चुनिए.

या फिर  HTML डॉक्यूमेंट की शुरुआत में head के नीचे meta टॅग में नीचे वाली लाईन जोडिए.