आपका पहला HTML पृष्ठ
हर HTML दस्तावेज़ समान छोटी संरचना साझा करता है: एक लाइन जो दस्तावेज़ प्रकार की घोषणा करती है, एक मूल तत्व जो सब कुछ लपेटता है, जानकारी के लिए एक head, और लोगों के द्वारा देखी गई सामग्री के लिए एक body। यह अध्याय उस संरचना को एक बार में एक लाइन अलग करता है और फिर इसे एक फ़ाइल में सहेजता है जिसे आप ब्राउज़र में खोल सकते हैं।
दस्तावेज़ की रूपरेखा
यह रूपरेखा है जिससे हर पृष्ठ शुरू होता है। आप इसे बिल्कुल कॉपी कर सकते हैं और body के अंदर के भागों को बदल सकते हैं:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</p>
</body>
</html>पहली लाइन, <!DOCTYPE html>, ब्राउज़र को बताती है कि यह एक आधुनिक HTML पृष्ठ है। इसके बाद मूल तत्व आता है, <html>, जो पृष्ठ पर सब कुछ लपेटता है। इसके अंदर दो बॉक्स हैं: <head> पर्दे के पीछे की जानकारी के लिए, और <body> शब्दों और चित्रों के लिए जो आगंतुक देखते हैं। आपकी हेडिंग और पैराग्राफ body में जाती हैं, क्योंकि यह वह भाग है जो दिखाया जाता है।
पूरी चीज़ को एक लेबल किए गए पार्सल के रूप में सोचें। doctype वह मुहर है जो कहती है कि किस डाक प्रणाली का उपयोग करना है, <html> बॉक्स है, head बाहर का लेबल है, और body अंदर पैक की गई चीज़ है।
<!DOCTYPE html>, फिर <html> एक <head> और एक <body> को लपेटता है। इसे जैसे है वैसे कॉपी करें और body में अपने शब्द डालें। आपको अभी तक इसे याद रखने का इरादा नहीं है; आप इसे इतनी बार टाइप करेंगे कि यह अपने आप याद रह जाएगा। क्या head बनाम body में जाता है
<html> के अंदर दोनों बॉक्स के अलग-अलग काम हैं। <head> उन चीज़ों को रखता है जो ब्राउज़र को जानने की आवश्यकता है लेकिन आगंतुक पृष्ठ पर नहीं पढ़ता है। <body> उन सभी चीज़ों को रखता है जो आगंतुक देखता है।
<head>
<title>My recipe notes</title>
</head>
<body>
<h1>Banana bread</h1>
<p>Mix, pour, bake for an hour.</p>
</body><title> head में बैठता है, और यह पृष्ठ का नाम है: यह पृष्ठ के बीच में नहीं बल्कि ब्राउज़र टैब में दिखाई देता है। हेडिंग और पैराग्राफ body में बैठते हैं, इसलिए वे पृष्ठ पर स्वयं दिखाई देते हैं। शुरुआत के लिए एक सरल नियम: यदि कोई आगंतुक इसे पढ़ना चाहता है, तो यह body में जाता है।
<title> head में रहता है और ब्राउज़र टैब को नाम देता है; आपकी हेडिंग और पैराग्राफ body में रहते हैं जहाँ लोग उन्हें पढ़ते हैं। यदि कोई आगंतुक इसे देखना चाहता है, तो यह body में जाता है। वह एक प्रश्न लगभग सब कुछ सॉर्ट करता है। Charset और viewport
लगभग हर पृष्ठ के head में दो और लाइनें जाती हैं। आप दोनों को जैसे है वैसे कॉपी कर सकते हैं:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first page</title>
</head>पहली लाइन ब्राउज़र को बताती है कि आपके पाठ को कैसे पढ़ना है ताकि लहजेदार अक्षर, घुंघराले उद्धरण और emoji सही तरीके से आ सकें, विचित्र प्रतीकों में बदलने के बजाय। दूसरी लाइन ब्राउज़र को पृष्ठ को स्क्रीन की चौड़ाई में फिट करने के लिए कहती है, जो यह है कि यह फोन पर समझदारी से दिखता है, बजाय डेस्कटॉप पृष्ठ के एक छोटे ज़ूम-आउट संस्करण के। आपको अभी तक हर शब्द को समझने की आवश्यकता नहीं है। दोनों को head के शीर्ष के पास रखें और आपके पृष्ठ व्यवहार करेंगे।
एक .html फ़ाइल को सहेजना और खोलना
एक HTML पृष्ठ एक सादा पाठ फ़ाइल है, इसलिए आप किसी भी पाठ संपादक में एक बना सकते हैं। एक ही चीज़ जो मायने रखती है वह नाम है: इसे .html में समाप्त करके सहेजें।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</p>
</body>
</html>इसे index.html के रूप में सहेजें। फिर अपने कंप्यूटर पर फ़ाइल को खोजें और इसे डबल-क्लिक करें: यह आपके ब्राउज़र में खुलता है और आपकी हेडिंग और पैराग्राफ दिखाता है। सर्वर को शुरू करने के लिए कुछ नहीं है और कुछ भी स्थापित करने के लिए नहीं है। .html अंत वह संकेत है जो आपके कंप्यूटर को बताता है कि इसे कोड की दीवार के बजाय वेब पृष्ठ के रूप में खोलना है। एक शब्द बदलें, सहेजें, और ब्राउज़र टैब को ताज़ा करें अपडेट देखने के लिए।
.html में समाप्त होता है। अपना index.html के रूप में सहेजें, डबल-क्लिक करें, और ब्राउज़र इसे तुरंत खोलता है, कोई सेटअप नहीं। एक परिवर्तन देखने के लिए, फ़ाइल को सहेजें और टैब को ताज़ा करें। वह save-and-refresh लूप पृष्ठ बनाने की पूरी लय है।