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

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

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

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

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

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

एचटीएमएल क्या है?

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

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

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

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

आपके ब्राउज़र में HTML फ़ाइल लोड हो रही है

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

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

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

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

फ़ाइल का संपादन

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

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

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

• नोटपैड++
• उत्कृष्ट
• परमाणु
• कोष्ठक

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

एचटीएमएल टैग

आइए HTML की कुछ मूलभूत विशेषताओं को देखें।

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

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

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

कार्रवाई में टैग का एक उदाहरण यहां दिया गया है:

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

आप देख सकते हैं कि "बेहद उत्साहित" शब्द इन <b> . में हैं टैग– “बी” बोल्ड के लिए है।

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

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

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

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

वाक्यांश से पहले के टैग को शुरुआती टैग — . कहा जाता है <b>

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

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

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

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

HTML दस्तावेज़ की मूल संरचना

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

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

सिद्धांत और HTML टैग

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

यह इस तरह दिखता है: <!DOCTYPE html>

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

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

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

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

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

सिर और शरीर के खंड

मुख्य HTML टैग के अंदर, आपकी सामग्री को आमतौर पर दो खंडों में विभाजित किया जाएगा:सिर और शरीर।

यहां बताया गया है कि यह कोड में कैसा दिखेगा:

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>

   </body>
</html>

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

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

यह इस तरह दिखना चाहिए:

<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>

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

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

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

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

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

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

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

हैडर टैग

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

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

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

हम  <h2> . का उपयोग करके एक उपशीर्षक भी जोड़ेंगे टैग, सामग्री के साथ:"एक HTML खेल का मैदान।"

और सिर्फ किक के लिए, बाकी के 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> ।

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

पैराग्राफ

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

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

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

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

इसलिए हम इस पैराग्राफ़ को यहां कॉपी करेंगे और इसे एक <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> टैग को एक विशेषता की आवश्यकता होती है, जिसका अर्थ है प्रारंभिक टैग के अंदर अतिरिक्त जानकारी।

विशेषताएं

इसके द्वारा उपयोग की जाने वाली विशेषता href . है गुण। यह हाइपरटेक्स्ट संदर्भ . के लिए संक्षिप्त है . और मान गंतव्य वेबसाइट का URL होता है।

उदाहरण के लिए, यदि आप Google मुखपृष्ठ से लिंक करना चाहते हैं, तो आप 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/।

हम 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 तालिका बना रहे हों, तो आपको एक बात सुनिश्चित करनी होगी कि तालिका में प्रत्येक पंक्ति में समान संख्या में कॉलम हों।

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

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th></th>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <!-- Groceries removed-->
      <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>

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

टेबल सेल में कई कॉलम/पंक्तियां हो सकती हैं

हालाँकि, आप एक टेबल सेल को कई कॉलम बना सकते हैं। मान लीजिए कि हम दो प्रकार के डेटा के लिए उपयोगिताओं को तोड़ना चाहते हैं, एक पानी के लिए और दूसरा बिजली के लिए। तो हम कहेंगे कि बिजली $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 changed to $100-->
      <td>$50</td><!-- extra cell added for $50 -->
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

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

Colspan विशेषता

हम चाहते हैं कि यूटिलिटीज हेडर सेल $100 और $50 सेल दोनों से ऊपर हो।

ऐसा करने के लिए, हम colspan . नामक एक विशेषता जोड़ेंगे , यानी कॉलम स्पैन, यूटिलिटीज हेडर सेल में। और इसे 2 पर सेट करें।

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

यह यूटिलिटीज सेल को सिर्फ एक के बजाय 2 कॉलम में फैला देगा।

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

रोस्पैन विशेषता

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

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

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

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

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

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th></th>
      <th>Month</th>
      <th>Rent</th>
      <th colspan="2">Utilities</th><!-- This cell will span 2 columns in the row below it -->
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
    <tr>
      <td rowspan="3">Fall</td><!-- this cell will span 3 rows, June, July, & August -->
      <td>June</td>
      <td>$1500</td>
      <td>$100</td><!-- The $100 and $50 cells will be under the Utilities cell-->
      <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>

Here’s what the final table looks like!

Tables were used for website layouts

A bit of historical context about tables. Aside from containing data, web developers also used to use tables to layout web designs.

So for example if you have a website design with a header, main content, and a footer, you can create one big table with three rows. And you can then put all your content in those table cells. Table cells can contain any kind of HTML– images, links, text, you name it.

It was very handy back in the day. Nowadays tables aren’t really used very often. The only common exception that I can think of is for HTML emails, because some older email systems can’t use a lot of CSS, so coding like it’s 1999 is unfortunately the only option.

In closing

And there you have it– you’ve made a basic website in HTML.

If you’re interested in learning HTML and web development, I’d recommend using some of the following resources to get started:

• freeCodeCamp — a free online coding bootcamp run by a non-profit. Many graduates have gone on to land full-time web development jobs.
• The Web Developer Bootcamp by Colt Steele — complete front and back-end online bootcamp on Udemy, taught by a former coding bootcamp instructor.

If you enjoyed this post, please leave a comment below, or share it with your friends!