इस सुपर सिंपल वेबसाइट को बनाकर HTML सीखें

क्या आप जानना चाहते हैं कि वेबसाइट कैसे बनाते हैं, लेकिन नहीं जानते कि किस HTML कोड का उपयोग करना है? अपनी पहली बेसिक वेबसाइट HTML में बनाने के लिए इस ट्यूटोरियल को फॉलो करें, सोर्स कोड उदाहरणों के साथ!

हम 3 चीजों पर जाएंगे:

1. HTML क्या है
2. कुछ बुनियादी HTML सिंटैक्स,
3. और अपने कंप्यूटर पर लोकल वेबसाइट कैसे बनाएं।

बस एक नोट, यह पोस्ट पूर्ण शुरुआती लोगों के लिए है जिन्होंने पहले कभी HTML के साथ काम नहीं किया है।

इसमें कोई CSS या जावास्क्रिप्ट शामिल नहीं होगा, इसलिए ध्यान रखें कि हम जो वेबपेज बनाएंगे वह उतना सुंदर नहीं होगा। यह सिर्फ HTML और इसकी बुनियादी कार्यक्षमता दिखाने पर केंद्रित है।

HTML क्या है?

अब, HTML क्या है? HTML का मतलब है हाइपरटेक्स्ट मार्कअप लैंग्वेज।

यह आपके ब्राउज़र में वेब पेज पर जानकारी प्रदर्शित करने का एक तरीका है।

एक बात याद रखने वाली है कि HTML अपने आप में एक प्रोग्रामिंग लैंग्वेज नहीं है। यह एक मार्कअप लैंग्वेज है। PHP या Java जैसी प्रोग्रामिंग लैंग्वेज लॉजिक और शर्तों जैसी चीजों का उपयोग करके कंटेंट को नियंत्रित करती हैं।

HTML वे चीजें नहीं करता, लेकिन यह अभी भी बेहद महत्वपूर्ण है। आखिरकार, यह अस्तित्व में हर एक वेबसाइट को बनाता है!

अपने ब्राउज़र में HTML फ़ाइल लोड करना

आप वास्तव में अपने कंप्यूटर पर एक HTML फ़ाइल बना सकते हैं, और इसे अपने ब्राउज़र में लोड कर सकते हैं। यह इंटरनेट पर नहीं होगा, इसलिए केवल आपका स्थानीय कंप्यूटर इसे देख सकता है।

असली वेबसाइटों के लिए जिन्हें कोई भी इंटरनेट पर एक्सेस कर सकता है, HTML फाइलें सर्वर नामक कंप्यूटर पर संग्रहीत होती हैं। लेकिन मूल प्रक्रिया काफी समान है।

अपनी HTML फ़ाइल बनाने के लिए:

1. अपने डेस्कटॉप पर जाएं या जहां भी आप फ़ाइल रखना चाहते हैं।
2. फिर राइट-क्लिक करें और "नया" और "टेक्स्ट डॉक्यूमेंट" चुनें। सुनिश्चित करें कि फ़ाइलनाम "index.html" पढ़ता है और ".txt" में समाप्त नहीं होता।
   (यदि किसी कारण से आप फ़ाइल एक्सटेंशन नहीं देख सकते हैं, तो "व्यू" टैब पर क्लिक करें और सुनिश्चित करें कि "फाइल नेम एक्सटेंशन" चेकबॉक्स चेक किया गया है।)
3. जब आपकी फ़ाइल पूरी तरह सेट हो जाए, तो आप इसे अपने ब्राउज़र में खोलना चाहेंगे।
4. अगर बाईं ओर क्रोम या अन्य ब्राउज़र आइकन है, तो इसका मतलब है कि आप इसे डबल-क्लिक करके स्वचालित रूप से खोल सकते हैं। अगर नहीं, तो राइट-क्लिक करें और फिर "ओपन विथ" चुनें और अपना पसंदीदा ब्राउज़र चुनें।
5. ब्राउज़र में, सब कुछ खाली दिखेगा, जो ठीक है क्योंकि फ़ाइल में अभी कुछ भी नहीं है।

फ़ाइल संपादित करना

अब जब आपकी फ़ाइल सेट हो गई है, तो आप कोडिंग शुरू करने के लिए तैयार हैं!

अपनी HTML फ़ाइल संपादित करने के लिए आप इसे कोड एडिटर में खोलना चाहेंगे। फ़ाइल पर राइट-क्लिक करें, और या तो "ओपन विथ" और एडिटर चुनें, या कुछ एडिटर का मेनू से क्विक लिंक होगा।

मैं विजुअल स्टूडियो कोड का उपयोग कर रहा हूं, लेकिन आप अन्य प्रोग्राम जैसे उपयोग कर सकते हैं:

• नोटपैड++
• सब्लाइम
• एटम
• ब्रैकेट्स

अब जब आपके पास इंडेक्स फ़ाइल आपके ब्राउज़र और एडिटर दोनों में खुली है, तो हम कुछ कोड लिखना शुरू करेंगे!

HTML टैग्स

आइए HTML की कुछ बुनियादी विशेषताओं को देखें।

HTML टैग्स से बना होता है।

टैग विशेष टेक्स्ट होते हैं जिनका उपयोग आप अपने वेब पेज के भागों को मार्क अप, या अलग करने के लिए करते हैं। इसलिए हाइपरटेक्स्ट "मार्कअप" लैंग्वेज।

ये टैग ब्राउज़र को बताते हैं कि टैग के अंदर जो कुछ भी है उसे एक विशिष्ट तरीके से प्रदर्शित करें।

यहाँ टैग के एक्शन में एक उदाहरण है:

This is my very first website and I'm <b>extremely excited!!!!!</b>

आप देख सकते हैं कि "extremely excited" शब्द इन <b> टैग्स में हैं - "b" बोल्ड के लिए है।

अब फ़ाइल सेव करें, और अपना ब्राउज़र रीलोड करें। टेक्स्ट ऐसा दिखना चाहिए:

This is my very first website and I'm extremely excited!!!!!

ठीक है! आपने बस कुछ HTML लिखा। उत्साहित महसूस कर रहे हैं? 🙂

HTML टैग की एनाटॉमी

आइए टैग को फिर से देखें।

वाक्यांश से पहले का टैग ओपनिंग टैग कहलाता है — <b>

और वाक्यांश के बाद का टैग क्लोजिंग टैग है — </b>। आप देख सकते हैं कि क्लोजिंग टैग में "b" से पहले एक फॉरवर्ड स्लैश है।

एक साथ, ये दो टैग ब्राउज़र को बताते हैं कि उनके बीच जो भी टेक्स्ट है उसे बोल्ड बनाएं। और ठीक ऐसा ही हुआ है।

अब शायद यह स्पष्ट है, लेकिन जब ब्राउज़र HTML लोड करता है, तो टैग स्वयं अदृश्य होते हैं - वे पेज पर दिखाई नहीं देते।

काफी कूल, है ना? एक कारण मुझे वेबसाइट बनाना इतना पसंद है कि यह लगभग जादू जैसा है, अपने ब्राउज़र में चीजों को प्रकट करने में सक्षम होना।

HTML डॉक्यूमेंट की बुनियादी संरचना

अब, टेक्स्ट की वह लाइन जो हमने लिखी है, काम कर रही है क्योंकि हमने फ़ाइल को HTML फ़ाइल के रूप में सेव किया है जिसे आपका ब्राउज़र पहचान सकता है।

लेकिन इंटरनेट पर असली HTML के लिए, हमें फ़ाइल में कुछ और टैग जोड़ने होंगे ताकि सब कुछ ठीक से काम करे।

डॉकटाइप और HTML टैग्स

आपको जिस सबसे पहले टैग की आवश्यकता है वह है डॉकटाइप टैग। यह बिल्कुल HTML टैग नहीं है, लेकिन यह ब्राउज़र को बताता है कि यह एक HTML5 डॉक्यूमेंट है।

यहाँ यह कैसा दिखता है: <!DOCTYPE html>

इस टैग को क्लोजिंग टैग की आवश्यकता नहीं है क्योंकि यह किसी टेक्स्ट को घेर नहीं रहा है, यह सिर्फ घोषित कर रहा है कि यह HTML है।

अतीत में उपयोग किए जाने वाले अन्य डॉकटाइप HTML 4 या XHTML हैं। लेकिन अभी HTML 5 वास्तव में एकमात्र डॉकटाइप उपयोग किया जाता है।

डॉकटाइप के बाद, आपके पास एक HTML टैग होता है। यह वेब ब्राउज़र को बताता है कि इसके अंदर सब कुछ HTML है:

<!DOCTYPE html> <html> </html>

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

हेड और बॉडी सेक्शन

मुख्य HTML टैग के अंदर, आपका कंटेंट आमतौर पर दो सेक्शन में अलग होगा: हेड और बॉडी।

यह कोड में ऐसा दिखेगा:

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

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

बॉडी टैग वेब पेज में मुख्य कंटेंट है। पेज पर आप जो कुछ भी देखते हैं वह आमतौर पर बॉडी टैग में होगा। इसलिए हमें शुरुआत में बनाए गए उस वाक्य को बॉडी में ले जाने की आवश्यकता है।

यहाँ वह कैसा दिखना चाहिए:

<body> This is my very first website and I'm <b>extremely excited!!!!!!</b> </body>

जब आप अपने ब्राउज़र में पेज रीलोड करते हैं, तो सब कुछ पहले जैसा ही दिखना चाहिए।

अब आइए हेड और बॉडी में आमतौर पर उपयोग किए जाने वाले कुछ बुनियादी टैग्स में जाएं।

मैं अस्तित्व में हर संभव टैग को नहीं देखने जा रहा हूं, क्योंकि सौ से अधिक हैं। और इसमें हमेशा के लिए लग जाएगा।

हम सिर्फ सबसे अधिक उपयोग किए जाने वाले को देखेंगे, ताकि आप इस बात का बेहतर अंदाजा लगा सकें कि HTML पेज कैसे एक साथ रखा जाता है।

बेसिक हेड टैग्स

मेटा टैग्स

पहला टैग जो आपके हेड में होना चाहिए वह है यह मेटा टैग। यह कैरेक्टर एन्कोडिंग सेट करता है।

<meta charset="utf-8">

UTF-8 एक प्रकार का यूनिकोड एन्कोडिंग है जिसका उपयोग दुनिया भर में लगभग सभी वेबसाइटों में किया जाता है। हमें एन्कोडिंग की आवश्यकता है क्योंकि हमें उन अक्षरों, संख्याओं, और प्रतीकों का अनुवाद करना होगा जिनका हम उपयोग करते हैं, कंप्यूटर द्वारा उपयोग किए जाने वाले बाइट्स में।

आप इसे एक प्रकार के डिक्शनरी के रूप में सोच सकते हैं, जो मानव भाषाओं को कंप्यूटर-स्पीक में अनुवाद करता है।

अगला मेटा टैग जो सभी वेबसाइटों पर होना चाहिए वह है यह व्यूपोर्ट टैग:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

यह रिस्पॉन्सिव वेबसाइटों के लिए महत्वपूर्ण है। रिस्पॉन्सिव का मतलब है कि वेबसाइट सभी डिवाइस पर ठीक से प्रदर्शित हो सकती है - कंप्यूटर, टैबलेट, और मोबाइल फोन।

इस टैग में कंटेंट कह रहा है कि इसे वेबसाइट की चौड़ाई को उस डिवाइस की चौड़ाई के समान बनाना चाहिए जो इसे देख रहा है।

उदाहरण के लिए, एक मोबाइल फोन में लैपटॉप कंप्यूटर की तुलना में बहुत छोटी स्क्रीन रिज़ॉल्यूशन, या आकार होता है। यह वेबसाइट को उपयोगकर्ता द्वारा उपयोग किए जा रहे के अनुसार खुद को रिसाइज़ करने देगा।

इनिशियल स्केल वेबसाइट का ज़ूम सेट करता है। आजकल ब्राउज़र पर आप ज़ूम इन और आउट कर सकते हैं, जिससे वेबसाइट बड़ी या छोटी दिखती है। हम चाहते हैं कि यह डिफ़ॉल्ट रूप से 1 पर सेट हो, मतलब ज़ूम इन या आउट नहीं।

टाइटल टैग

मेटा टैग के अलावा, सबसे महत्वपूर्ण टैग में से एक है टाइटल टैग:

<title>My First Website</title>

जैसा कि आप शायद अनुमान लगा सकते हैं, यह वेब पेज का शीर्षक सेट करता है। अगर किसी वेबसाइट के अलग-अलग पेज हैं, तो प्रत्येक पेज का अपना शीर्षक हो सकता है।

एक बार जब आप इन सभी टैग्स को अपने कोड में जोड़ लेते हैं, तो हेड टैग ऐसा दिखना चाहिए:

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Website</title> </head>

और आप अपने ब्राउज़र में देखेंगे कि टैब में वही होगा जो आपने टाइटल टैग में डाला था:

बेसिक बॉडी टैग्स

आइए अब मजेदार चीजों को देखते हैं - बॉडी टैग्स उस कंटेंट को नियंत्रित करते हैं जो आप वास्तव में देखते हैं।

अधिकांश बुनियादी बॉडी टैग्स उन चीजों पर आधारित हैं जो आप वर्ड डॉक्यूमेंट में कर सकते हैं। आप हेडलाइन बना सकते हैं, टेक्स्ट को बोल्ड कर सकते हैं, सूचियां बना सकते हैं, और यहां तक कि टेबल भी।

CSS से पहले के दिनों में, इन टैग्स का उपयोग करने से आपके कंटेंट को व्यवस्थित और स्टाइल करने में मदद मिलती थी ताकि यह आपके पाठक द्वारा अधिक आसानी से समझा जा सके।

इन सभी टैग्स का उतना उपयोग नहीं किया जाता जितना पहले किया जाता था। उनमें से कुछ अब उतने आवश्यक नहीं हैं क्योंकि हम अब CSS का उपयोग करके समान स्टाइल प्राप्त कर सकते हैं।

लेकिन मुझे लगता है कि कम से कम यह जानना अभी भी उपयोगी है कि ये बुनियादी टैग क्या हैं।

हेडर टैग्स

आइए पहले हेडलाइन या हेडर टैग्स को देखें, जिन्हें अक्षर H से नामित किया गया है। प्रत्येक H टैग में H के बाद एक नंबर भी होता है। वे <h1> से <h6> तक होते हैं।

<h1> टैग प्राथमिकता में सबसे अधिक होता है। यह आमतौर पर पेज के शीर्षक के लिए उपयोग किया जाता है।

हम अपने वेब पेज में एक <h1> टैग जोड़ने जा रहे हैं। टैग के अंदर हम वेबपेज का शीर्षक, My First Website डालेंगे।

हम <h2> टैग का उपयोग करके एक सबटाइटल भी जोड़ेंगे, जिसका कंटेंट होगा: "An HTML Playground."

और सिर्फ मनोरंजन के लिए, आइए बाकी H टैग्स को भी जोड़ दें, <h6> तक।

तो आपका बॉडी टैग ऐसा कुछ दिखेगा:

<body> <h1>My First Website</h1> <h2>An HTML Playground</h2> <h3>An HTML Playground</h3> <h4>An HTML Playground</h4> <h5>An HTML Playground</h5> <h6>An HTML Playground</h6> </body>

अगर आप सेव करते हैं और अपना वेब पेज रीलोड करते हैं, तो यह ऐसा दिखेगा:

आप देख सकते हैं कि फॉन्ट साइज़ <h1> से <h6> तक उत्तरोत्तर छोटे होते जाते हैं।

अधिकांश वेबसाइटें सभी H टैग्स का उपयोग नहीं करतीं। आमतौर पर वे शीर्षक के लिए <h1>, उपशीर्षक के लिए <h2>, और कभी-कभी सेक्शन शीर्षक के लिए <h3> का उपयोग करेंगे। <h4> से <h6> का उपयोग करना काफी दुर्लभ है।

पैराग्राफ

अगला टैग जिसे हम देखने जा रहे हैं वह है पैराग्राफ, या <p> टैग। वर्ड की तरह ही, आप अपने कंटेंट को ब्लॉक में अलग करने के लिए पैराग्राफ का उपयोग कर सकते हैं। आप अपने कंटेंट को <p> टैग्स से घेरकर एक पैराग्राफ बना सकते हैं।

हम कुछ प्लेसहोल्डर टेक्स्ट के साथ एक पैराग्राफ बनाने जा रहे हैं।

प्लेसहोल्डर टेक्स्ट खोजने का सबसे आसान तरीका गूगल पर "लोरम इप्सम." खोजना है। यह एक साइट है जिसका मैं अक्सर उपयोग करता हूं।

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

तो हम इस पैराग्राफ को यहां कॉपी करेंगे और इसे अपने कोड में, <p> टैग के अंदर डालेंगे। आइए दूसरा पैराग्राफ भी बनाएं। हम कुछ और टेक्स्ट कॉपी करेंगे और इसे दूसरे <p> टैग में डालेंगे।

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis arcu vel mollis finibus. Nunc facilisis vel nisl lacinia cursus. Cras suscipit augue sed volutpat tincidunt. Aenean dictum tincidunt urna, quis eleifend quam mattis eu. Integer sollicitudin, nisl faucibus aliquam ullamcorper, metus sapien scelerisque lorem, at ornare dui orci non orci. Integer tempus consectetur metus, vitae blandit nibh aliquam nec. Pellentesque vestibulum arcu eget ante sollicitudin, id accumsan dui molestie. Suspendisse vehicula semper dui id congue. Suspendisse sed velit sit amet velit luctus varius. Ut condimentum tincidunt consequat. Sed eu ligula non magna scelerisque auctor. </p> <p> Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque nunc, eget elementum metus. Nulla sollicitudin bibendum nibh, sit amet semper tortor. Nunc rhoncus non arcu in scelerisque. Donec magna mauris, congue ac dignissim rutrum, tincidunt quis leo. Maecenas dictum orci in magna iaculis, in elementum felis viverra. Aenean sit amet sapien odio. Donec molestie est et nisl mattis dictum. Nullam at nibh aliquet, tincidunt lorem et, facilisis enim. Praesent id felis sit amet quam dignissim volutpat. Nam nec cursus mi, quis tincidunt justo. </p>

ब्राउज़र में, यह ऐसा दिखेगा:

और वहां हमारे पास है। ब्राउज़र पैराग्राफ और अन्य कंटेंट के बीच स्वचालित रूप से कुछ स्पेस जोड़ता है:

लाइन ब्रेक

अब, यदि आप अपने कंटेंट को कई लाइनों पर अलग करना चाहते हैं, लेकिन आप पैराग्राफ के साथ आने वाले उस स्पेस को नहीं चाहते हैं, तो आप लाइन ब्रेक, या <br> टैग का उपयोग कर सकते हैं।

आइए कुछ और लोरम इप्सम टेक्स्ट प्राप्त करें और इसे अपने एडिटर में डालें।

HTML के बारे में एक बात ध्यान देने योग्य है कि यह स्वचालित रूप से लाइन ब्रेक नहीं करेगा।

अगर आप अपने कंटेंट में कुछ बार एंटर दबाते हैं, तो पेज पर कुछ अलग नहीं होगा। स्पेसबार को कई बार दबाने के लिए भी यही बात लागू होती है।

ब्राउज़र सिर्फ एक स्पेस देगा और बस। लाइन ब्रेक बनाने के लिए, आपको <br> टैग जोड़ना होगा।

आप अधिक स्पेस जोड़ने के लिए कई लाइन ब्रेक भी जोड़ सकते हैं।

Fusce sit amet rutrum lacus.<br><br><br><br><br/> Sed efficitur laoreet nisl,ac faucibus velit hendrerit sit amet. Phasellus ac orci eget nisi porta accumsan a eget ex. Nam lacinia dolor at mi tristique rhoncus.Maecenas nisl est, rhoncus id cursus non, tempor a neque.

वॉयड एलिमेंट्स को क्लोजिंग टैग की आवश्यकता नहीं होती

आप देखेंगे कि <br> का क्लोजिंग टैग नहीं है - इसे क्लोजिंग टैग की आवश्यकता नहीं है क्योंकि यह टेक्स्ट को घेरने के लिए उपयोग नहीं किया जाता है।

इस प्रकार के टैग जिनमें क्लोजिंग टैग नहीं होता, उन्हें वॉयड एलिमेंट्स कहा जाता है। वॉयड का अर्थ है खाली क्योंकि उनका कोई कंटेंट नहीं होता।

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

ब्राउज़र अभी भी टैग को सही ढंग से पढ़ेगा, लेकिन मैं अभी भी वॉयड एलिमेंट्स को उस स्लैश के बिना लिखने की सिफारिश करूंगा।

स्टाइल टैग्स

अगला सेट टैग्स जिन्हें हम देखने जा रहे हैं वे हैं स्टाइल टैग्स - ये टैग टेक्स्ट में स्टाइल जोड़ते हैं।

वे बोल्ड हो सकते हैं, जैसे हमने शुरुआत में किया था, फिर इटैलिक, अंडरलाइन, एम्फासाइज्ड और स्ट्रॉन्ग टैग्स भी हैं।

जैसा कि हमने पहले कहा, इन स्टाइल टैग्स का उतना उपयोग नहीं किया जाता क्योंकि अब आप CSS का उपयोग करके सब कुछ स्टाइल कर सकते हैं।

आइए प्रत्येक स्टाइल टैग को देखें:

• <b> टैग टेक्स्ट को बोल्ड बनाता है।
• <i> टैग टेक्स्ट को इटैलिक बनाता है।
• <u> टैग टेक्स्ट को अंडरलाइन करता है।
• <em> (एम्फासाइज्ड) टैग आमतौर पर ब्राउज़र में इटैलिक के रूप में इंटरप्रेट किया जाता है।
• और <strong> टैग आमतौर पर बोल्ड टेक्स्ट होगा।

यहाँ डेमो कोड है कि उनमें से प्रत्येक कैसा दिखेगा:

<b>Sed efficitur laoreet nisl,</b><br> <i>ac faucibus velit hendrerit sit amet.</i><br> <u>Phasellus ac orci eget nisi porta accumsan a eget ex.</u><br> <em>Nam lacinia dolor at mi tristique rhoncus.</em><br> <strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>

हॉरिजॉन्टल रूल

हॉरिजॉन्टल रूल टैग आपके वेब पेज पर एक हॉरिजॉन्टल लाइन बनाएगा जो पूरे पार जाती है।

आप इसे इस तरह लिखते हैं: <hr>

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

... <strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong> <hr> Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies. Donec eget lacinia elit. Suspendisse commodo justo at lorem molestie, vitae tempus enim laoreet. ...

<hr> टैग से पहले का कंटेंट लाइन के ऊपर होगा, और इसके नीचे का कंटेंट लाइन के नीचे होगा जैसे:

एंकर लिंक

लिंक इंटरनेट पर घूमने के मुख्य तरीकों में से एक हैं।

लिंक टैग को <a> टैग के रूप में लिखा जाता है। वह A "एंकर" के लिए खड़ा है, क्योंकि लिंक दो वेबसाइटों को वैसे ही जोड़ता है जैसे नाव का एंकर नाव को उससे जोड़ता है जिससे वह एंकर कर रहा है।

लिंक बनाने के लिए, पहले आप उस लिंक टेक्स्ट के चारों ओर <a> टैग रखें जिसे आप क्लिक करने योग्य बनाना चाहते हैं।

सिर्फ टैग के अलावा, <a> टैग को एक एट्रिब्यूट की आवश्यकता होती है, जिसका अर्थ है ओपनिंग टैग के अंदर अतिरिक्त जानकारी।

एट्रिब्यूट्स

जिस एट्रिब्यूट का यह उपयोग करता है वह है href एट्रिब्यूट। यह हाइपरटेक्स्ट रेफरेंस का संक्षिप्त रूप है। और मान गंतव्य वेबसाइट का URL है।

उदाहरण के लिए, यदि आप गूगल होमपेज से लिंक करना चाहते हैं, तो आप URL, https://www.google.com/ का उपयोग करेंगे।

URL का अर्थ है यूनिवर्सल रिसोर्स लोकेटर, और यह एक पते की तरह कार्य करता है जो आपको उस वेब पेज या फ़ाइल का स्थान देगा जिसे आप लोड करना चाहते हैं।

<a> टैग में अक्सर उपयोग किया जाने वाला एक अन्य एट्रिब्यूट "टार्गेट" है। यह नियंत्रित करता है कि आपके द्वारा क्लिक किया गया लिंक उसी पेज में खुलेगा, या आपके ब्राउज़र में नए पेज या टैब में खुलेगा।

डिफ़ॉल्ट रूप से यह उसी पेज में लिंक खोलेगा। यदि आप लिंक को नए पेज में खोलना चाहते हैं, तो टार्गेट को "_blank" पर सेट करें।

यहाँ एंकर लिंक का एक डेमो है:

<a href="https://www.google.com/" target="_blank">Sed in lacus a augue rutrum</a>

इमेजेस

अगली चीज जिसे हम देखेंगे वह है इमेजेस। अपने वेब पेज पर इमेज डालने के लिए, आप इमेज टैग का उपयोग कर सकते हैं, जिसे <img> के रूप में लिखा जाता है।

इमेज टैग एक और वॉयड एलिमेंट है जिसे क्लोजिंग टैग की आवश्यकता नहीं होती।

लिंक टैग की तरह, इमेज टैग को एक URL की आवश्यकता होती है। लिंक द्वारा उपयोग किए जाने वाले href के बजाय, इमेज टैग में src एट्रिब्यूट होता है, जिसका अर्थ है इमेज का स्रोत।

आइए इस उदाहरण के लिए इंटरनेट पर एक इमेज ढूंढें - एक वास्तव में सहायक स्थान जहां मैं टेस्ट इमेज के लिए जाता हूं वह है https://placeholder.com/।

हम प्लेसहोल्डर.कॉम से एक इमेज का URL लेंगे और इसे हमारे द्वारा बनाई जा रही इमेज के इमेज सोर्स में डालेंगे:

<img src="https://via.placeholder.com/600x300.jpg">

वैकल्पिक रूप से आप इमेज को स्वयं डाउनलोड कर सकते हैं और इसे अपनी index.html फ़ाइल के समान फोल्डर में रख सकते हैं, और इसे इस तरह रेफरेंस कर सकते हैं:

<img src="600x300.jpg"> 

एक एट्रिब्यूट जिसका <img> टैग उपयोग करता है वह है बॉर्डर, जिसे आप पिक्सेल की संख्या पर सेट कर सकते हैं:

<img src="https://via.placeholder.com/600x300.jpg" border="10">

सूचियाँ

अगली चीज जिसे हम देखने जा रहे हैं वह है सूचियाँ। HTML बुलेटेड या नंबर वाली सूचियाँ काफी आसानी से बना सकता है।

बुलेटेड सूचियों को अनऑर्डर्ड सूचियाँ कहा जाता है, उन ऑर्डर्ड सूचियों के विपरीत जो संख्याओं का उपयोग करती हैं।

सूची बनाने के लिए आप सूची टैग का उपयोग करेंगे - या तो <ol> या <ul> यह निर्भर करता है कि आप ऑर्डर्ड या अनऑर्डर्ड सूची बना रहे हैं।

हम विभिन्न प्रकार के फलों की एक अनऑर्डर्ड सूची बनाने जा रहे हैं।

हम सूची के लिए अपना <ul> टैग बनाएंगे।

सूची टैग के अंदर आप अपने सूची आइटम डालेंगे। प्रत्येक आइटम अपने स्वयं के सूची आइटम टैग में जाएगा, जिसे <li> के रूप में लिखा जाता है।

हम सेब, संतरे, अनानास, आम, और ड्रैगनफ्रूट डालेंगे:

<ul> <li>apples</li> <li>oranges</li> <li>pineapples</li> <li>mangoes</li> <li>dragonfruit</li> </ul>

और यहाँ वह कैसा दिखता है।

अब, अगर हम अपनी सूची को ऑर्डर्ड सूची में बदलते हैं, <ol> टैग का उपयोग करके, यहाँ वह कैसा दिखेगा।

नेस्टेड सूचियाँ

आप सूचियों को एक दूसरे के अंदर नेस्ट भी कर सकते हैं। मान लें कि मैं सेब के तहत विभिन्न प्रकार के सेब जोड़ना चाहता हूं। हम प्रश्न में सूची आइटम के अंदर एक नया सूची टैग बनाएंगे, अपने स्वयं के सूची आइटम के साथ।

तो सेब <li> टैग के भीतर, "सेब" टेक्स्ट के नीचे एक नया <ul> टैग जोड़ूंगा।

फिर हम कुछ विभिन्न प्रकार के सेब डालेंगे - गोल्डन डिलीशियस, गाला, ग्रैनी स्मिथ।

<ul> <li>apples <ul> <li>golden delicious</li> <li>granny smith</li> <li>gala</li> </ul> </li> <li>oranges</li> <li>pineapples</li> <li>mangoes</li> <li>dragonfruit</li> </ul>

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

नेस्टिंग और इंडेंटेशन

यह मुझे अच्छे HTML लिखने के एक महत्वपूर्ण पहलू पर लाता है। यदि आप एक HTML टैग को दूसरे के अंदर रखते हैं, तो इसे नेस्टिंग कहा जाता है।

चाइल्ड और पैरेंट एलिमेंट्स

दूसरे के अंदर एक एलिमेंट को चाइल्ड एलिमेंट कहा जाता है, और बाहरी एलिमेंट को पैरेंट एलिमेंट कहा जाता है।

पैरेंट और चाइल्ड एलिमेंट्स को व्यवस्थित करने के लिए, हम चाइल्ड एलिमेंट को इंडेंट करते हैं। यह इसे पैरेंट से अलग करने में मदद करता है।

आप फलों की सूची के साथ देख सकते हैं, मैंने मुख्य सूची आइटम (सेब, संतरे, और आम) को इंडेंट किया। और फिर सेब के प्रकारों के लिए मैंने और भी अधिक इंडेंट किया।

इंडेंटिंग कोड को मनुष्यों के लिए पठनीय बनाता है

यह कोड को साफ रखने में मदद करता है। आप और अन्य लोग जल्दी से समझ सकते हैं कि यह क्या कर रहा है।

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

इंडेंटिंग का यह अभ्यास न केवल HTML के लिए, बल्कि CSS, जावास्क्रिप्ट, और मूल रूप से अस्तित्व में हर प्रोग्रामिंग लैंग्वेज के लिए अच्छी प्रैक्टिस माना जाता है।

यह कंप्यूटर के लिए आवश्यक नहीं है, लेकिन यह मनुष्यों के लिए कोड पढ़ने के लिए आवश्यक है। मेरी पहली नौकरी में, इंडेंटिंग पहली चीज थी जो मुझे मेरे प्रशिक्षण के दौरान सिखाई गई थी।

यह काफी महत्वपूर्ण है। किसी और के कोड पर काम करना और उसका पूरा गड़बड़ होना इससे बुरा कुछ नहीं है। इसलिए इंडेंटिंग यह सुनिश्चित करने का एक आसान तरीका है कि आप ऐसा कोड लिख रहे हैं जिसे अन्य लोग (और आप स्वयं) वापस जाकर पढ़ सकें।

टेबल

और इंडेंटिंग और नेस्टेड एलिमेंट्स की बात करते हुए, अंतिम HTML टैग जिसे हम देखने जा रहे हैं वह इसका बहुत उपयोग करता है। यह टेबल है।

टेबल्स मूल रूप से डेटा को पंक्तियों और स्तंभों में व्यवस्थित करने के एक कुशल तरीके के रूप में उपयोग किए जाते थे। प्रदर्शित करने के लिए, आइए एक काल्पनिक घरेलू मासिक बजट के लिए एक टेबल बनाएं।

टेबल बनाना

शुरू करने के लिए, हमें पहले एक <table> टैग की आवश्यकता होगी। टेबल में बाकी सब कुछ इस टैग के अंदर होगा।

टेबल के अंदर हमारे पास टेबल रो, टेबल सेल, और कॉलम हेडर के लिए टेबल हेडर होंगे।

फिर हम पहली टेबल रो जोड़ेंगे, <tr> टैग का उपयोग करके।

<table> <tr></tr> </table>

इस रो के अंदर हम कॉलम हेडर रखना चाहेंगे। हम इसे <th> - टेबल हेडर - टैग्स का उपयोग करके कर सकते हैं। डिफ़ॉल्ट रूप से टेबल हेडर बोल्ड टेक्स्ट होते हैं और सेल के भीतर केंद्रित भी होते हैं।

फिर हम यहां कुछ बजट श्रेणियां जोड़कर इस टेबल को बनाएंगे। हम महीने से शुरू करेंगे, और फिर किराया, उपयोगिताएं, किराना, बाहर खाना, और मनोरंजन होंगे। मुझे यकीन है कि अन्य श्रेणियां हैं जो मैं भूल रहा हूं, लेकिन हम इसे यहां सरल रख रहे हैं।

<table> <tr> <th>Month</th> <th>Rent</th> <th>Utilities</th> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> </table>

फिर अगली रो में, हम अगस्त महीने के लिए कुछ डेटा जोड़ेंगे। चूंकि ये हेडर नहीं हैं, हम <td> टैग का उपयोग करेंगे, टेबल डेटा के लिए।

ठीक है। मान लें कि हमारा किराया हर महीने $1500 है? फिर हमें उपयोगिताओं के लिए $150, किराना के लिए $350, बाहर खाने के लिए $100, और मनोरंजन के लिए $50 मिले।

<table> <tr> <th>Month</th> <th>Rent</th> <th>Utilities</th> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> <tr> <td>August</td> <td>$1500</td> <td>$150</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> </table>

आइए देखें यह कैसा दिखता है। और यहाँ हमारी टेबल है:

टेबल को स्टाइल करना

यह काफी बेसिक दिख रहा है, है ना? हम टेबल को कुछ बिल्ट-इन टेबल एट्रिब्यूट्स के साथ थोड़ा स्टाइल कर सकते हैं।

पहले हम टेबल टैग पर बॉर्डर एट्रिब्यूट को सेट करके टेबल पर लाइनें जोड़ सकते हैं। हम बॉर्डर को 1 पिक्सेल मोटाई पर सेट करेंगे। अगर आप बड़ी संख्या का उपयोग करते हैं, तो टेबल के चारों ओर का बॉर्डर चौड़ा हो जाएगा। हालांकि टेबल सेल के बीच के बॉर्डर डिफ़ॉल्ट रूप से हमेशा 1 पिक्सेल चौड़े होते हैं।

आप सेलपैडिंग का भी उपयोग कर सकते हैं, जो प्रत्येक सेल के अंदर अतिरिक्त स्पेस की मात्रा को नियंत्रित करता है, टेक्स्ट से बॉर्डर तक। तो आइए 10 की सेलपैडिंग आज़माएं। और यह बस थोड़ा और ब्रीदिंग रूम देता है ताकि यह तंग न लगे।

आप जो अन्य एट्रिब्यूट बदल सकते हैं वह है सेलस्पेसिंग। यह सेल के बीच स्पेस की मात्रा को नियंत्रित करता है। व्यक्तिगत रूप से मुझे सेल के बीच कोई स्पेस पसंद नहीं है इसलिए हम इसे 0 पर रखेंगे।

<table border="1" cellpadding="10" cellspacing="0">

यहाँ उन स्टाइल एट्रिब्यूट्स के साथ टेबल कैसी दिखती है:

टेबल्स के लिए सर्वोत्तम अभ्यास

HTML टेबल बनाते समय, एक चीज जिसका आपको ध्यान रखना है वह है टेबल में हर रो में समान संख्या में कॉलम होना।

अन्यथा चीजें थोड़ी गड़बड़ हो जाएंगी। मैं आपको दिखा सकता हूं कि यह कैसा दिखता है अगर मैं किराना सेल को हटा दूं।

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

टेबल सेल कई कॉलम/रो तक फैल सकते हैं

हालांकि, आप एक टेबल सेल को कई कॉलम तक फैला सकते हैं। मान लें कि हम उपयोगिताओं को तोड़ना चाहते हैं ताकि दो प्रकार के डेटा हों, एक पानी के लिए और एक बिजली के लिए। तो हम कहेंगे बिजली $100 है और पानी $50 है।

इसे करने के लिए हम वास्तव में डेटा में एक अतिरिक्त सेल बनाएंगे और उपयोगिताओं की मात्रा को समायोजित करेंगे। हमारे पास पहले बिजली $100 के लिए और दूसरी पानी $50 के लिए।

<table border="1" cellpadding="10" cellspacing="0"> <tr> <th>Month</th> <th>Rent</th> <th>Utilities</th> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> <tr> <td>August</td> <td>$1500</td> <td>$100</td><!-- $150 को $100 में बदला गया--> <td>$50</td><!-- $50 के लिए अतिरिक्त सेल जोड़ा गया --> <td>$350</td> <td>$100</td> <td>$50</td> </tr> </table>

अगर हम इस बिंदु पर टेबल लोड करते हैं तो आप देखेंगे कि यह फिर से गड़बड़ दिखता है क्योंकि दूसरी पंक्ति में वह अतिरिक्त सेल है। यह अगला एट्रिब्यूट इसे ठीक करेगा।

कॉलस्पैन एट्रिब्यूट

हम चाहते हैं कि उपयोगिताओं हेडर सेल $100 और $50 दोनों सेल के ऊपर हो।

इसे करने के लिए, हम उपयोगिताओं हेडर सेल में कॉलस्पैन नामक एक एट्रिब्यूट जोड़ेंगे, यानी कॉलम स्पैन। और इसे 2 पर सेट करें।

<th colspan="2">Utilities</th>

यह उपयोगिताओं सेल को केवल एक के बजाय 2 कॉलम तक फैलाएगा।

और यहाँ हम हैं! बहुत व्यवस्थित दिखता है, है ना?

रोस्पैन एट्रिब्यूट

कॉलस्पैन के अलावा आप रोस्पैन एट्रिब्यूट का उपयोग करके एक सेल को कई पंक्तियों तक फैला सकते हैं।

मान लें कि हमारे पास जून, जुलाई और अगस्त के लिए डेटा था, और हम उन्हें "फॉल" के रूप में नामित करना चाहते थे।

मैं बस फिर से कॉपी-पेस्ट करने जा रहा हूं, और जून और जुलाई डेटा बनाने के लिए अगस्त डेटा का उपयोग करूंगा।

फॉल के लिए सेल बनाने के लिए, मैं इसे महीनों के बाईं ओर चाहता हूं, जून से शुरू करके। तो जून की पंक्ति में, मैं जून से पहले एक नया सेल बनाऊंगा, और इसमें "फॉल" डालूंगा। फिर मैं उस सेल का रोस्पैन 3 पर सेट करूंगा, ताकि यह जून, जुलाई और अगस्त तक फैले।

और हमें पहली पंक्ति में एक स्पेसर सेल जोड़ने की आवश्यकता है ताकि पहले कॉलम के साथ कुल 4 पंक्तियाँ फैली हों।

<table border="1" cellpadding="10" cellspacing="0"> <tr> <th></th> <th>Month</th> <th>Rent</th> <th colspan="2">Utilities</th><!-- यह सेल नीचे की पंक्ति में 2 कॉलम तक फैलेगा --> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> <tr> <td rowspan="3">Fall</td><!-- यह सेल 3 पंक्तियों तक फैलेगा, जून, जुलाई, और अगस्त --> <td>June</td> <td>$1500</td> <td>$100</td><!-- $100 और $50 सेल उपयोगिताओं सेल के नीचे होंगे--> <td>$50</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> <tr> <td>July</td> <td>$1500</td> <td>$100</td> <td>$50</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> <tr> <td>August</td> <td>$1500</td> <td>$100</td> <td>$50</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> </table>

यहाँ अंतिम टेबल कैसी दिखती है!

टेबल्स का उपयोग वेबसाइट लेआउट के लिए किया जाता था

टेबल्स के बारे में कुछ ऐतिहासिक संदर्भ। डेटा रखने के अलावा, वेब डेवलपर्स वेब डिज़ाइन लेआउट करने के लिए भी टेबल्स का उपयोग करते थे।

तो उदाहरण के लिए यदि आपके पास हेडर, मुख्य कंटेंट, और फूटर के साथ एक वेबसाइट डिज़ाइन है, तो आप तीन पंक्तियों के साथ एक बड़ी टेबल बना सकते हैं। और फिर आप उन टेबल सेल में अपना सारा कंटेंट डाल सकते हैं। टेबल सेल किसी भी प्रकार के HTML को समाहित कर सकते हैं - इमेज, लिंक, टेक्स्ट, आप जो चाहें।

यह उस समय बहुत आसान था। आजकल टेबल्स का वास्तव में अधिक उपयोग नहीं किया जाता। एकमात्र सामान्य अपवाद जिसके बारे में मैं सोच सकता हूं वह HTML ईमेल के लिए है, क्योंकि कुछ पुराने ईमेल सिस्टम बहुत अधिक CSS का उपयोग नहीं कर सकते, इसलिए दुर्भाग्य से 1999 की तरह कोडिंग करना एकमात्र विकल्प है।

समापन में

और वहां आपके पास है - आपने HTML में एक बेसिक वेबसाइट बना ली है।

यदि आप HTML और वेब डेवलपमेंट सीखने में रुचि रखते हैं, तो मैं आरंभ करने के लिए निम्नलिखित संसाधनों में से कुछ का उपयोग करने की सिफारिश करूंगा:

• freeCodeCamp — एक गैर-लाभकारी द्वारा संचालित एक फ्री ऑनलाइन कोडिंग बूटकैंप। कई स्नातक फुल-टाइम वेब डेवलपमेंट जॉब पाने में सफल रहे हैं।
• कोल्ट स्टील द्वारा द वेब डेवलपर बूटकैंप — उडेमी पर पूरा फ्रंट और बैक-एंड ऑनलाइन बूटकैंप, एक पूर्व कोडिंग बूटकैंप इंस्ट्रक्टर द्वारा पढ़ाया जाता है।

यदि आपको यह पोस्ट पसंद आई, तो कृपया नीचे कमेंट छोड़ें, या इसे अपने दोस्तों के साथ शेयर करें!