आज इस आर्टिकल में हम आपको HTML Basic In Hindi – Part 1 के बारे में बता रहे है.
यहाँ पर आपको कुछ महत्वपूर्ण tag के बारे में बताएँगे, जिनका इस्तेमाल बहुत ज्यादा होता है. इससे पहले हमने आपको HTML के के बारे में introduction दी थी. उस tutorial में हमने आपको html फाइल का सैंपल और html फाइल save करना और अपने browser में open करने का तरीका बताया था.
अब हम सबसे पहले आपको HTML डॉक्यूमेंट है के बारे में बताएँगे.
HTML Document Structure
यह HTML का basic structure है. आपको कोई भी भी html डॉक्यूमेंट तैयार करना है तो इसी फॉर्मेट में तैयार करना है.
<!DOCTYPE html><html><body><h1>First Heading</h1><p>First paragraph.</p></body></html>
HTML Headings Tutorial in Hindi
जैसा की हमने आपको बताया है की HTML में पहले से define किये हुए tag है. HTML heading total 6 है, जिनका इस्तेमाल आपको बड़े text के लिए किया जाता है. इसी पूरी जानकारी हम आपको HTML Heading के tutorial में बताएँगे. इसका एक छोटा से सैंपल code हम आपको नीचे दे रहे है. अब से हम Notepad++ सॉफ्टवेयर का इस्तेमाल करेंगे, जिसके बारे में हमने आपको पिछले tutorial में बताया था.
नीचे डी गए फोटो में हम आपको इस code की आउटपुट दिखा रहे है. जिससे आपको heading element को जानने और समझने में आसानी होगी.
HTML Paragraph Tutorial in Hindi
HTML के source कोड में paragraph के लिए <p> element का इस्तेमाल किया जाता है. इसका इस्तेमाल करके आप HTML डॉक्यूमेंट को यहाँ बता सकते है की आपने जो <p></p> tag के बीच में जो content लिखा है वह एक पैराग्राफ है.
तो इस प्रकार हम paragraph के लिए html फाइल में कोडिंग कर सकते है. इसकी browser में आउटपुट आपको नीचे के फोटो में मिल जायेगी.
अब आप सोच रहे होंगे की अगर मुझे कोई शब्द bold करना है या फिर किसी font को बदलना है या फिर line का या शब्द का color चेंज करना है तो वो कैसे करेंगे. तो आप चिंता ना करे इसके बाद में हम आपको HTML paragraph के tutorial में पूरी डिटेल से समझायेंगे.
HTML Links Tutorials in Hindi
Link tag का इस्तेमाल हम किसी user के द्वारा क्लिक करने पर certain फंक्शन(किसी दुसरे डॉक्यूमेंट open करना, किसी दूसरी वेबसाइट पर redirect करना, कुछ डाउनलोड करवाना) परफॉर्म करवाने के लिए करते है. HTML में <a> element का इस्तेमाल करके हम किसी भी content को एक Link में convert कर सकते है.
हम आपको नीचे HTML link का source code दे रहे है जिसकी मदद से आप आसनी से link बना सकते है.
आप ऊपर बताये गए कोड को अपने editor में लिखकर जब open करोगे तो आपको नीचे दिखाई गयी फोटो के जैसा आउटपुट आपके browser पर देखने को मिलेगा. जब आप इस लिंक पर क्लिक करेंगे तो आपको एक नए page पर ले जाया जाएगा. <a> element के बारे में पूरी जानकारी हम आपको HTML tutorial में देंगे.
HTML Images Tutorials in Hindi
HTML का सबसे important part images को manage करना होता है, <img/> tag की मदद से आप अपने HTML डॉक्यूमेंट में images add कर सकते है. इसके कुछ attributes है जिनके बारे में डिटेल्स में हम आपको HTML images के tutorial में बताएँगे.यह एक ऐसा tag जिसके साथ closing tag नही आता है. इसको self-closing tagभी कहा जाता है. इस प्रकार के कई tag है जो अपने में एक पूर्ण element होते है.
नीचे फोटो में हम आपको ऊपर लिखे गए tag की आउटपुट दिखा रहे है.
आप image की हाइट और width भी बदल सकते है. इसके बारे में पूरी डिटेल हम आपको आगे बताएँगे.
