HTML पृष्ठ कैसे बनाएं: चरण-दर-चरण निर्देश, तकनीक और सिफारिशें
क्या आपको लगता है कि कैसे एक HTML पृष्ठ बनाने के लिए? ऐसा करने के लिए, आपको कुछ घंटों में खर्च करना होगा और आप HTML की मूल बातें जान सकेंगे। और आप अपना पहला पेज 5 मिनट में बना सकते हैं।
एचटीएमएल हाइपरटेक्स्ट मार्कअप लैंग्वेज के लिए है अनुवाद में, इसका अर्थ है "हाइपरटेक्स्ट मार्कअप लैंग्वेज" यह समझना महत्वपूर्ण है कि HTML कोई प्रोग्रामिंग भाषा नहीं है, लेकिन एक वेबसाइट मार्कअप
सभी आधुनिक ब्राउज़र इसे पहचान सकते हैं। फिर वे उपयोगकर्ता के लिए एक सुविधाजनक तरीके से जानकारी प्रदर्शित करते हैं, जैसा कि पहले लेखक द्वारा नियोजित था।
इस भाषा में, विशेष टैग्स का उपयोग किया जाता है प्रत्येक टैग इसका कार्य करता है उनमें से बहुत से हैं आदर्श रूप में, आपको सब कुछ सीखना होगा। लेकिन शुरुआती बुनियादी ज्ञान के लिए पर्याप्त है
एचटीएमएल मूल बातें
इससे पहले कि आप एक HTML पृष्ठ बनाते हैं, आपको यह जानना होगा कि इसके द्वारा क्या किया गया है। इस भाषा में दो अवधारणाएं हैं: एक तत्व और एक टैग
निर्दिष्ट करने के लिए जहां यह तत्व प्रारंभ और बंद हो, खोलने और समापन टैग का उपयोग करें ऐसा दिखता है
<उद्घाटन टैग> सामग्री </ समापन टैग>
जैसा कि आप देख सकते हैं, उद्घाटन और समापन टैग केवल "/" में भिन्न होते हैं
संपूर्ण HTML दस्तावेज़ इन का एक संग्रह हैतत्वों। दस्तावेज़ की संरचना के लिए कुछ आवश्यकताएं हैं पृष्ठ पर मौजूद सभी सामग्री को दो <html> और </ html> टैग के बीच होना चाहिए जब आप कोड लिखते हैं, तो तुरंत खोलने और समापन टैग को सेट करने की आदत करें
यह भी याद रखें कि एचटीएमएल भाषा की संरचना का अपना स्वयं का पदानुक्रम है अन्यथा इसे घोंसले के शिकार कहा जाता है। एचटीएमएल टैग सबसे महत्वपूर्ण है, क्योंकि हर कोई इसके अंदर है।
HTML के दो बच्चे हैं:
- <head> ... </ head>;
- <body> .. </ body>
हेड ब्लॉक विभिन्न सेवा जानकारी इंगित करता है यह जानकारी ब्राउज़र में प्रदर्शित नहीं होती है उदाहरण के लिए, डेवलपर्स के लिए निर्देश, किसी भी प्रोग्राम के लिए, रोबोट के लिए और बहुत कुछ
सबसे महत्वपूर्ण बात, यहां कोई सामग्री नहीं है
शरीर अनुभाग दस्तावेज़ की सामग्री इंगित करता है जो उपयोगकर्ता को प्रदर्शित किया जाएगा।
एक बार में टैग खोलने और बंद करने के लिए जानें, क्योंकि 10 नेस्टेड आइटम हो सकते हैं। इसके अतिरिक्त, सुविधा के लिए, यह अनुशंसा की जाती है कि नेस्टेड टैग इंडेंट हो। उदाहरण के लिए, इस तरह से
<Html>
<Head>
</ head>
<Body>
</ body>
</ html>
तो ऐसा करें कि महत्व टैग के बराबर हैएक स्तर पर, और बच्चों - "अंदर" इसलिए यह धारणा और कोड के आवश्यक टुकड़े की खोज के लिए अधिक सुविधाजनक है। अन्यथा, आप भ्रमित हो सकते हैं। लेकिन अंतरिक्ष, सिर और शरीर टैग को बचाने के लिए बिना किसी इंडेन्टेशन के किया जा सकता है। ऐसा किया जाता है ताकि हर किसी के पास एक अतिरेक इंडेंट न हो। बाकी सभी को अलग करना वांछनीय है
एक साधारण HTML पृष्ठ कैसे बनाएं
कोड लिखने के लिए आपको किसी प्रकार का संपादक चाहिए। उनमें से बहुत सारे हैं। नोटपैड ++ और एडोब ड्रीमवेवर लोकप्रिय हैं। आप एक नोटबुक का भी उपयोग कर सकते हैं।
इस प्रकार नोटपैड ++ संपादक दिखता है।
यह एक बहुत ही आसान संपादक है और यह मुफ़्त है। उपर्युक्त एडोब ड्रीमवेवर चार्ज करने योग्य है। नोटबुक से HTML कोड लिखने के लिए लक्षित संपादकों के बीच अंतर यह है कि विशेष टैग हाइलाइट किए जाते हैं। यदि इसे हाइलाइट नहीं किया गया है, तो इसका मतलब है कि आपने गलत तरीके से लिखा है।
यह सुनिश्चित करने के लिए कि बैकलाइट भाषा से मेल खाता है, आपको सेटिंग्स में इसे निर्दिष्ट करने की आवश्यकता है।
आइए देखें कि नोटपैड में एक HTML पृष्ठ कैसे बनाएं। यही है, हम तकनीकी भाग खत्म करते हैं और फिर सीधे टैग के अध्ययन पर जाते हैं।
नोटपैड एचटीएमएल में एक वेब पेज कैसे बनाएं
सबसे पहले, नोटपैड खोलें।
फिर उसमें टाइप करें जो निम्न स्क्रीनशॉट में दिखाया गया है।
प्रतिलिपि न केवल अपने हाथों से लिखने के लिए उपयोग करें। जब आप अपने हाथों से लिखते हैं, तो आप संपूर्ण टैग डेटाबेस को बेहतर याद करते हैं।
उसके बाद, "फ़ाइल सहेजें" मेनू पर क्लिक करें और कोई भी फ़ाइल नाम निर्दिष्ट करें, लेकिन एक्सटेंशन .html के साथ।
उसके बाद, आप ब्राउज़र में फ़ाइल खोल सकते हैं और परिणाम की प्रशंसा कर सकते हैं। अब आपको समझना चाहिए कि नोटपैड एचटीएमएल में एक वेब पेज कैसे बनाया जाए।
विश्व कंसोर्टियम डब्ल्यू 3 सी
डब्ल्यू 3 सी जैसे एक संगठन है, जोइंटरनेट के लिए सभी मानकों को विकसित और लागू करता है। इन नियमों के अनुसार सभी ब्राउज़र इन मानकों का पालन करते हैं और पेज लेआउट (कोड) को संसाधित करते हैं।
एचटीएमएल डेवलपर्स की आधिकारिक साइट पर, आप उनके उपयोग के लिए सभी टैग और नियमों के साथ एक टेबल पा सकते हैं। इस आलेख के ढांचे के भीतर, हम सबसे बुनियादी मानते हैं।
आप सोच सकते हैं, क्या नियम हो सकते हैं? सभी वर्णित टैग की अपनी सिफारिश है। उनमें से कई हैं:
- वैकल्पिक टैग
- निषिद्ध।
- खाली टैग
- अप्रचलित
- खोया
एचटीएमएल में टैग
एक HTML पृष्ठ बनाने से पहले, आपको समझना होगा कि HEAD के सेवा भाग में क्या होना चाहिए।
सिर क्षेत्र में, अनिवार्य दोनों हैं औरवैकल्पिक टैग एक अनिवार्य टैग एक शीर्षक है। यह <title> शीर्षक </ title> द्वारा इंगित किया गया है। यह पूरे दस्तावेज़ को सौंपा गया है। और Google खोज इंजन के परिणामों में आप जो देखते हैं वह शीर्षक टैग है।
आइए बॉडी सेक्शन पर जाएं। ऐसे तत्व हैं जो ब्राउज़र में प्रदर्शित होते हैं, और गैर-प्रदर्शित भी होते हैं। उदाहरण के लिए, उपयोगकर्ता को टिप्पणियां प्रदर्शित नहीं होती हैं। यदि आप किसी टीम में काम करते हैं तो उन्हें नोट्स के लिए या अन्य कर्मचारियों को संकेत देने के लिए इस्तेमाल किया जा सकता है।
वे के रूप में नामित हैं <! - टिप्पणी ->
सब कुछ जो <के बीच है!- और ->, इस तरह से कार्यक्रम द्वारा मूल्यांकन किया जाता है। ध्यान दें कि आप एक टिप्पणी टैग को किसी अन्य टिप्पणी टैग से संलग्न नहीं कर सकते हैं। जैसे ही आप <! - खोलते हैं, सब कुछ जो प्रदर्शित होता है प्रदर्शित नहीं किया जाएगा। जानकारी तब तक दिखाई नहीं देगी जब तक हैंडलर बंद टैग को देखता है ->।
इस घोंसले का एक उदाहरण:
<! - पहली टिप्पणी <! - दूसरी टिप्पणी -> पहली टिप्पणी की निरंतरता ->
ब्राउज़र में परिणाम निम्नलिखित होगा
पहली टिप्पणी की निरंतरता ->
और यहाँ एक टुकड़ा है <! - पहली टिप्पणी <! - दूसरी टिप्पणी -> दिखाई नहीं देगा। दूसरा खुलने वाला <! - टैग अनदेखा कर दिया गया था और इसे सादा पाठ के रूप में माना जाता था।
पाठ में शीर्षक
यह शीर्षक न केवल शीर्षक टैग के साथ हीड अनुभाग में इंगित किया गया है। संदर्भ में, शीर्षक जरूरी संकेत दिया जाना चाहिए। क्योंकि केवल उपयोगकर्ता ही इसे देखेगा।
शीर्षक विभिन्न स्तरों पर आते हैं। यह पाठ में पदानुक्रम बनाता है। पुस्तकों में खंड, अध्याय, पैराग्राफ के बराबर।
केवल 6 स्तर हैं। सबसे महत्वपूर्ण शीर्षक <h1> शीर्षलेख </ h1> द्वारा इंगित किया गया है। पृष्ठ उन्नति के संदर्भ में, एच 1 और शीर्षक टैग में पाठ मेल खाना चाहिए। इसके अलावा, सौंदर्य दृष्टिकोण से एच 1 केवल एक होना चाहिए। लेकिन इसका मतलब यह नहीं है कि ब्राउज़र बाद के एच 1 को संसाधित नहीं करेगा। वे जितना चाहें उतने किए जा सकते हैं, लेकिन यह अवांछनीय है।
उपशीर्षक के लिए h2 से h6 तक टैग का उपयोग करें। उन्हें पहले, दूसरे, तीसरे, चौथे, पांचवें और छठे स्तर का शीर्षक कहा जाता है। यह जानकारी के घोंसले और श्रेणियों में एक उपविभाजन बनाता है।
ऐसा लगता है।
अनुच्छेद
कोड में मुख्य पाठ को <p> टैग में स्वरूपित करने की आवश्यकता है।</ p>। यह शब्द "अनुच्छेद" से आया था। प्रत्येक पैराग्राफ को <p> टैग के साथ स्वरूपित किया जाना चाहिए, और सभी एक ही ढेर में नहीं। एक सामान्य लाइन ब्रेक संसाधित नहीं किया जाएगा। सब कुछ एक पंक्ति में प्रदर्शित किया जाएगा। हाइफ़न के लिए, आपको टैग टैग का उपयोग करने की आवश्यकता है।
ध्यान दें कि माइग्रेशन टैग बंद नहीं है। वह अकेला है
कविता के उदाहरण पर विचार करें।
अलग-अलग टैग, उनके "नाम" के अलावा, है औरइसकी अपनी विशेषता है। उदाहरण के लिए, एक अनुच्छेद टैग में "संरेखण" विशेषता होती है, जिसे संरेखित करके दर्शाया जाता है। यह मूल्य बाएं, दाएं, केंद्र ले सकता है। यही है, बाएं या दाएं किनारे पर या केंद्र में संरेखित करें।
लिंक का उपयोग करना
शायद, आप पहले से ही सोचा था: लेकिन लिंक के साथ एक HTML पेज कैसे बनाएँ? इसमें कुछ भी जटिल नहीं है। एक HTML पृष्ठ के लिए लिंक बनाना आसान है। इसके लिए, एक विशेष <a> टैग है। इसकी अपनी आवश्यक विशेषताएं हैं। सही लिंक इस तरह दिखता है:
<a href="adkey"> लिंक टेक्स्ट </a>
यदि आप पता और टेक्स्ट निर्दिष्ट नहीं करते हैं, तो यह लिंक उपयोगकर्ता के लिए बेकार या अदृश्य होगा।
निष्कर्ष
बहुत सारे टैग हैं, और प्रत्येक के पास अपने गुणों का सेट है। इस जानकारी को पढ़ने के बाद, आपको समझना होगा कि एक HTML वेब पेज कैसे बनाएं।
इस में अपना ज्ञान विस्तारित करने के लिएक्षेत्र, आपको अतिरिक्त साहित्य पढ़ने और W3C वेबसाइट पर स्थित आधिकारिक HTML टैग निर्देशिका का उपयोग करने की आवश्यकता है। यदि आप भाषा लेखकों की समय-समय पर अद्यतन निर्देशिका का उपयोग नहीं करते हैं, तो आपके लिए इस क्षेत्र में पेशेवर बनना मुश्किल होगा।
</ p>
