Html क्या है और इसे कैसे सीखे?
एचटीएमएल कोड, टैग और सीएसएस सीखें
शुरुआती के लिए HTML आसान तरीका: आज ही HTML और CSS सीखना शुरू करें
प्रकटीकरण: आपका समर्थन साइट को चालू रखने में मदद करता है! हम इस पृष्ठ पर सुझाई गई कुछ सेवाओं के लिए एक रेफरल शुल्क अर्जित करते हैं। और अधिक जानें
HTML का अध्ययन करें और हमारी चरण-दर-चरण मार्गदर्शिका के साथ कोड करना सीखें
स्वागत! आपको HTML और CSS सीखने का सबसे आसान तरीका मिल गया है।
अपने एचटीएमएल कौशल में सुधार करें |
चाहे आप नौसिखिए हों, वेब डिज़ाइन की दुनिया में जाने की उम्मीद कर रहे हों या एक अनुभवी वेबमास्टर जो आपके कौशल में सुधार करने के इच्छुक हों, हमारे पास आपकी वेब डिज़ाइन आवश्यकताओं के अनुरूप ऑनलाइन ट्यूटोरियल हैं ।
भीड़ में? जाओ हमारे ट्यूटोरियल के लिए सीधे और अब एचटीएमएल सीखना प्रारंभ करें!
हमारा संपूर्ण शुरुआती ट्यूटोरियल आपको कुछ ही घंटों में सामान्य से वेबमास्टर में बदल देगा। कई अन्य HTML ट्यूटोरियल के विपरीत, यह एक चरण-दर-चरण मार्गदर्शिका है - एक उबाऊ लंबे समय तक चलने वाला संदर्भ नहीं।
हमारी चरण-दर-चरण मार्गदर्शिका आपको HTML की मूल बातें और अपनी पहली वेबसाइट बनाने का तरीका सिखाती है। इसका मतलब है कि एचटीएमएल पेज को कैसे लेआउट करें, टेक्स्ट और इमेज कैसे जोड़ें, हेडिंग और टेक्स्ट फॉर्मेटिंग कैसे जोड़ें, और टेबल का उपयोग कैसे करें।
हम आपको घंटों में नहीं, बल्कि मिनटों में आपकी नई वेबसाइट बनाने के लिए प्रेरित करेंगे ।
निरपेक्ष शुरुआती के लिए HTML
जबकि इंटरनेट पर कई गाइड बहुत सारे दिमागी दबदबे वाले सिद्धांत का उपयोग करके HTML सिखाने का प्रयास करते हैं, इसके बजाय यह ट्यूटोरियल आपको अपनी पहली साइट बनाने के लिए व्यावहारिक कौशल देने पर ध्यान केंद्रित करेगा ।
इसका उद्देश्य आपको यह दिखाना है कि "क्यों" पर बहुत अधिक ध्यान केंद्रित किए बिना पूरे ट्यूटोरियल को खर्च किए बिना अपना पहला वेब पेज कैसे बनाया जाए।
इस ट्यूटोरियल के अंत तक, आपको एक बुनियादी वेबसाइट बनाने का ज्ञान होगा और हम आशा करते हैं कि यह आपको हमारे फॉलो-ऑन गाइड का उपयोग करके HTML की दुनिया में और अधिक गहराई तक जाने के लिए प्रेरित करेगा।
एचटीएमएल क्या है?
ठीक है, तो यह अनिवार्य सिद्धांत का एकमात्र बिट है। HTML लिखना शुरू करने के लिए, यदि आप जानते हैं कि आप क्या लिख रहे हैं तो यह मदद करता है।
HTML वह भाषा है जिसमें अधिकांश वेबसाइटें लिखी जाती हैं । HTML का उपयोग पेज बनाने और उन्हें कार्यात्मक बनाने के लिए किया जाता है।
उन्हें देखने में आकर्षक बनाने के लिए इस्तेमाल किए गए कोड को CSS के रूप में जाना जाता है और हम इस पर बाद के ट्यूटोरियल में ध्यान केंद्रित करेंगे। अभी के लिए, हम आपको यह सिखाने पर ध्यान देंगे कि डिज़ाइन के बजाय निर्माण कैसे करें ।
एचटीएमएल का इतिहास
HTML को सबसे पहले टिम बर्नर्स-ली, रॉबर्ट कैलियाउ और अन्य द्वारा 1989 में शुरू किया गया था । यह हाइपर टेक्स्ट मार्कअप लैंग्वेज के लिए है।
हाइपरटेक्स्ट का अर्थ है कि दस्तावेज़ में ऐसे लिंक होते हैं जो पाठक को दस्तावेज़ में अन्य स्थानों पर या किसी अन्य दस्तावेज़ पर पूरी तरह से कूदने की अनुमति देते हैं। नवीनतम संस्करण को HTML5 के रूप में जाना जाता है ।
एक मार्कअप लैंग्वेज एक ऐसा तरीका है जिससे कंप्यूटर एक दूसरे से बात करते हैं ताकि यह नियंत्रित किया जा सके कि टेक्स्ट को कैसे प्रोसेस और प्रस्तुत किया जाता है। ऐसा करने के लिए HTML दो चीजों का उपयोग करता है: टैग और विशेषताएँ ।
टैग और विशेषताएँ क्या हैं?
टैग और विशेषताएँ HTML का आधार हैं।
वे एक साथ काम करते हैं लेकिन अलग-अलग कार्य करते हैं - दोनों को अलग करने में 2 मिनट का निवेश करना उचित है ।
एचटीएमएल टैग क्या हैं?
टैग का उपयोग HTML तत्व की शुरुआत को चिह्नित करने के लिए किया जाता है और वे आमतौर पर कोण कोष्ठक में संलग्न होते हैं। एक टैग का एक उदाहरण है: <h1>.
कार्य करने के लिए अधिकांश टैग खोले <h1>और बंद होने चाहिए </h1>।
HTML विशेषताएँ क्या हैं?
विशेषताओं में अतिरिक्त जानकारी होती है . विशेषताएँ एक प्रारंभिक टैग का रूप लेती हैं और अतिरिक्त जानकारी को अंदर रखा जाता है ।
एक विशेषता का एक उदाहरण है:
<img src="mydog.jpg" alt="A photo of my dog.">
इस उदाहरण में, छवि स्रोत (src) और वैकल्पिक पाठ (alt) <img>टैग की विशेषताएँ हैं ।
याद रखने के सुनहरे नियम
टैग के विशाल बहुमत को तत्व की जानकारी जैसे कि शीर्षक या टैग के बीच आराम करने वाले पाठ के साथ खोला ( <tag>) और बंद ( </tag>) होना चाहिए ।
एकाधिक टैग का उपयोग करते समय, टैग को उसी क्रम में बंद किया जाना चाहिए जिसमें वे खोले गए थे । उदाहरण के लिए:
<strong><em>This is really important!</em></strong>
एचटीएमएल संपादक
अब जब हमने मूल सिद्धांत को रास्ते से हटा दिया है। यह सीखने का समय है कि हमारी पहली वेबसाइट कैसे बनाई जाए ।
सबसे पहले, हमें यह सुनिश्चित करना चाहिए कि हमारे पास सही उपकरण हैं। सबसे महत्वपूर्ण, हमें एक HTML संपादक की आवश्यकता है।
बाजार में कई विकल्प हैं। यहाँ कुछ सबसे लोकप्रिय हैं:
उदात्त पाठ 3
हालाँकि, इस ट्यूटोरियल के लिए, हम Sublime Text 3 का उपयोग करेंगे क्योंकि यह मुफ़्त है और Windows, Mac और Linux उपयोगकर्ताओं के लिए क्रॉस-प्लेटफ़ॉर्म समर्थन भी प्रदान करता है।
उदात्त पाठ 3
Sublime Text 3 में दाईं ओर एक मिनी-पूर्वावलोकन विंडो है।
पेशेवरों
आसानी से अनुकूलन योग्य
शुरुआती के अनुकूल
चुनने के लिए सुखद रंग योजनाएं।
दोष
दस्तावेज़ या कोड प्रिंट नहीं कर सकते
कोई टूलबार या डैशबोर्ड उपलब्ध नहीं है।
नोटपैड ++
HTML और अन्य भाषा कोडर्स के लिए एक अन्य सामान्य विकल्प Notepad++ है । स्वच्छ कोड लिखने के लिए आवश्यक कार्यों को डाउनलोड करने और निष्पादित करने के लिए यह एक छोटा प्रोग्राम है।
एचटीएमएल नोटपैड ++
यह नोटपैड++ है। ग्लैमरस से दूर लेकिन काम करती हैं।
पेशेवरों
व्याकुलता मुक्त इंटरफ़ेस
स्वत: पूर्णता सुविधा
विस्तारित कार्यक्षमताओं के लिए प्लगइन विकल्प।
दोष
शुरुआती लोगों के लिए अभ्यस्त होना मुश्किल हो सकता है
मैक के लिए कोई समर्थन नहीं।
कोमोडो संपादित करें
कोमोडो एडिट एक ही लेबल द्वारा जारी दो संपादकों में से एक है। वे विभिन्न प्रकार के एक्सटेंशन और भाषा समर्थन के साथ एक सरल, ओपन-सोर्स संपादक प्रदान करते हैं ।
यह डाउनलोड करने के लिए स्वतंत्र है।
कोमोडो संपादक
कोमोडो फ्लैश इंटरफेस के लिए एक नहीं है, लेकिन उपयोग में आसान है।
पेशेवरों
आसानी से समझ में आने वाला कोडिंग इंटरफ़ेस
मैक, विंडोज और लिनक्स के लिए उपलब्ध
प्रभावशाली भाषा समर्थन।
दोष
डिफ़ॉल्ट रूप से कोई स्वतः पूर्णता नहीं
दृश्य सेटिंग्स को ढूंढना और बदलना मुश्किल है।
क्या बचें
आपके कोड का फ्रंट-एंड व्यू ब्राउज़र से ब्राउज़र में भिन्न होता है - आप इसके बारे में उन्नत CSS के साथ और जानेंगे।
HTML कोड लिखते समय Microsoft Word या किसी अन्य वर्ड प्रोसेसर का उपयोग न करें , केवल एक HTML संपादक या बहुत कम से कम, आपकी मशीन का अंतर्निहित नोटपैड, कार्य के लिए उपयुक्त है।
दूसरे, सुनिश्चित करें कि आपने अपनी आगामी रचना का पूर्वावलोकन करने के लिए क्रोम और फ़ायरफ़ॉक्स जैसे कई अलग-अलग ब्राउज़र स्थापित किए हैं ।
अपना पहला HTML वेबपेज बनाना
सबसे पहले, आपको अपना HTML संपादक खोलने की जरूरत है, जहां आपको एक साफ सफेद पृष्ठ मिलेगा जिस पर अपना कोड लिखना है।
वहां से आपको अपने पेज को निम्नलिखित टैग्स के साथ लेआउट करना होगा।
एक HTML पृष्ठ का मूल निर्माण
ये टैग आपके द्वारा बनाए जाने वाले प्रत्येक HTML पृष्ठ के शीर्ष पर एक दूसरे के नीचे रखे जाने चाहिए ।
<!DOCTYPE html>— यह टैग उस भाषा को निर्दिष्ट करता है जिसे आप पेज पर लिखेंगे। इस मामले में, भाषा HTML 5 है।
<html> — यह टैग संकेत करता है कि यहाँ से हम HTML कोड में लिखने जा रहे हैं।
<head>— यह वह जगह है जहां पृष्ठ के लिए सभी मेटाडेटा जाता है — सामान ज्यादातर खोज इंजन और अन्य कंप्यूटर प्रोग्राम के लिए होता है।
<body>— यह वह जगह है जहाँ पृष्ठ की सामग्री जाती है।
एचटीएमएल संरचना
इस प्रकार आपका औसत HTML पृष्ठ दृष्टिगत रूप से संरचित होता है।
आगे के टैग
<head>टैग के अंदर , एक टैग होता है जो हमेशा शामिल होता है: <title>, लेकिन कुछ ऐसे भी हैं जो उतने ही महत्वपूर्ण हैं:
<title>
यह वह जगह है जहां हम पेज का नाम डालते हैं क्योंकि यह ब्राउज़र विंडो या टैब के शीर्ष पर दिखाई देगा।
<meta>
यह वह जगह है जहां दस्तावेज़ के बारे में जानकारी संग्रहीत की जाती है: वर्ण एन्कोडिंग, नाम (पृष्ठ संदर्भ), विवरण।
आइए एक बुनियादी <head>खंड का प्रयास करें :
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This field contains information about your page. It is usually around two sentences long.">.
<meta name="author" content="Conor Sheils">
</header>
सामग्री जोड़ना
अगला, हम <body>टैग बनाएंगे ।
HTML <body>वह जगह है जहां हम उस सामग्री को जोड़ते हैं जिसे मानव आंखों से देखने के लिए डिज़ाइन किया गया है।
इसमें टेक्स्ट, इमेज, टेबल, फॉर्म और बाकी सब कुछ शामिल है जो हम हर दिन इंटरनेट पर देखते हैं।
अपने वेब पेज पर HTML हेडिंग कैसे जोड़ें
HTML में, शीर्षकों को निम्नलिखित तत्वों में लिखा जाता है:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
जैसा कि आपने अनुमान लगाया होगा <h1>और <h2>सबसे महत्वपूर्ण शीर्षकों के लिए उपयोग किया जाना चाहिए, जबकि शेष टैग का उपयोग उप-शीर्षक और कम महत्वपूर्ण पाठ के लिए किया जाना चाहिए।
खोज इंजन बॉट इस आदेश का उपयोग यह तय करते समय करते हैं कि किसी पृष्ठ पर कौन सी जानकारी सबसे महत्वपूर्ण है।
अपना शीर्षक बनाना
आइए इसे आजमाएं। HTML संपादक में एक नई लाइन पर, टाइप करें:
<h1>Welcome to My Page</h1>
और सेव मारो। हम इस फ़ाइल को "मेरे वेबपेज" नामक एक नए फ़ोल्डर में " index.html " के रूप में सहेजेंगे ।
सच्चाई का क्षण : नई सहेजी गई फ़ाइल पर क्लिक करें और आपका पहला वेब पेज आपके डिफ़ॉल्ट ब्राउज़र में खुल जाना चाहिए। यह सुंदर नहीं हो सकता है यह तुम्हारा है ... सब तुम्हारा। *राक्षसी हँसी*
अच्छा चलो दूर मत जाओ; हमारे पास अभी भी बहुत सारी बेहतरीन सुविधाएं हैं जिन्हें हम आपके पेज में जोड़ सकते हैं।
HTML में टेक्स्ट कैसे जोड़ें
हमारे HTML पृष्ठ में टेक्स्ट जोड़ना टैग के साथ खोले गए तत्व का उपयोग करना आसान है <p>जो एक नया पैराग्राफ बनाता है । हम अपने सभी नियमित टेक्स्ट को एलीमेंट के अंदर रखते हैं <p>।
जब हम HTML में टेक्स्ट लिखते हैं, तो हमारे पास कई अन्य तत्व भी होते हैं जिनका उपयोग हम टेक्स्ट को नियंत्रित करने या इसे एक निश्चित तरीके से प्रदर्शित करने के लिए कर सकते हैं ।
अन्य प्रमुख तत्व
वे इस प्रकार हैं:
तत्त्व अर्थ प्रयोजन
<बी> मोटा महत्वपूर्ण जानकारी हाइलाइट करें
<मजबूत> मज़बूत इसी तरह बोल्ड करने के लिए, मुख्य टेक्स्ट को हाइलाइट करने के लिए
<i> तिरछा पाठ को निरूपित करने के लिए
<em> जोर दिया गया पाठ आमतौर पर छवि कैप्शन के रूप में उपयोग किया जाता है
<चिह्न> चिह्नित पाठ पाठ की पृष्ठभूमि को हाइलाइट करें
<छोटा> छोटा पाठ टेक्स्ट को सिकोड़ने के लिए
<हड़ताल> स्ट्राइक आउट टेक्स्ट टेक्स्ट में एक हॉरिजॉन्टल लाइन लगाने के लिए
<u> रेखांकित पाठ लिंक या टेक्स्ट हाइलाइट के लिए उपयोग किया जाता है
<इन्स> सम्मिलित पाठ एक सम्मिलित पाठ दिखाने के लिए एक रेखांकन के साथ प्रदर्शित
<उप> सबस्क्रिप्ट टेक्स्ट टाइपोग्राफिक शैलीगत पसंद
<सुप> सुपरस्क्रिप्ट टेक्स्ट एक और टंकण प्रस्तुति शैली
ये टैग विचाराधीन टेक्स्ट के चारों ओर खोले और बंद होने चाहिए ।
आइए इसे आजमाएं। HTML संपादक में एक नई लाइन पर, निम्न HTML कोड टाइप करें:
<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>
परिणाम देखने के लिए सेव को हिट करना न भूलें और फिर अपने ब्राउज़र में पेज को रिफ्रेश करें ।
एचटीएमएल में लिंक कैसे जोड़ें
जैसा कि आपने देखा होगा, इंटरनेट बहुत सारे लिंक से बना है ।
वेब पर सर्फिंग करते समय आप जिस चीज पर क्लिक करते हैं वह लगभग एक लिंक है जो आपको उस वेबसाइट के दूसरे पेज पर ले जाती है जिस पर आप जा रहे हैं या किसी बाहरी साइट पर।
<a> टैग द्वारा खोली गई विशेषता में लिंक शामिल होते हैं । यह तत्व वह पहला तत्व है जिससे हम मिले हैं जो एक विशेषता का उपयोग करता है और इसलिए यह पहले बताए गए टैग से अलग दिखता है ।
एंकर टैग
<a> (या एंकर) उद्घाटन टैग प्रारूप में लिखा गया है:
<a href="https://blogging.com/how-to-start-a-blog/">Your Link Text Here </a>
विशेषता का पहला भाग उस पृष्ठ को इंगित करता है जो लिंक पर क्लिक करने के बाद खुल जाएगा ।
इस बीच, विशेषता के दूसरे भाग में वह पाठ होता है जो एक आगंतुक को उस लिंक पर क्लिक करने के लिए लुभाने के लिए प्रदर्शित किया जाएगा ।
यदि आप अपनी खुद की वेबसाइट बना रहे हैं तो आप अपने सभी पेजों को पेशेवर वेब होस्टिंग पर होस्ट करेंगे । इस मामले में, आपकी वेबसाइट पर आंतरिक लिंक <a href=" mylinkedpage.html"> यहां लिंक करें </a> होंगे।
आइए एक एंकर टैग बनाएं
आइए इसे आजमाएं। अपने वर्तमान index.html पृष्ठ से कोड का डुप्लिकेट बनाएं । इसे अपने HTML संपादक में एक नई विंडो में कॉपी / पेस्ट करें।
इस नए पृष्ठ को “page2.html” के रूप में सहेजें और सुनिश्चित करें कि यह उसी फ़ोल्डर में सहेजा गया है जिसमें आपका index.html पृष्ठ है।
Page2.html पर निम्नलिखित कोड जोड़ें:
<a href="http://www.google.com">Google</a>
यह पृष्ठ 2 पर Google के लिए एक लिंक बनाएगा। सहेजें दबाएं और अपने index.html पृष्ठ पर वापस आएं ।
index.html पर एक नई लाइन पर निम्नलिखित कोड जोड़ें:
<a href="*folder(s)*/page2.html">Page2</a>
सुनिश्चित करें कि फ़ाइल का फ़ोल्डर पथ (page2.html) सही है। अपने ब्राउज़र में सहेजें दबाएं और index.html का पूर्वावलोकन करें।
अगर सब कुछ सही है तो आपको एक लिंक दिखाई देगा जो आपको आपके दूसरे पेज पर ले जाएगा । दूसरे पेज पर एक लिंक होगा जो आपको google.com पर ले जाएगा ।
अपनी वेबसाइट पर HTML में इमेज कैसे जोड़ें
आज की आधुनिक डिजिटल दुनिया में, चित्र ही सब कुछ हैं। <Img> टैग सब कुछ आप अपनी साइट पर प्रदर्शन छवियों की जरूरत है। <a> एंकर तत्व की तरह, <img> में भी एक विशेषता होती है।
विशेषता आपके कंप्यूटर के लिए छवि के स्रोत , ऊंचाई , चौड़ाई और वैकल्पिक पाठ के बारे में जानकारी पेश करती है ।
स्टाइलिंग और प्रारूप
छवि संपत्ति
आप आइटम पर राइट-क्लिक करके और 'गुण' का चयन करके किसी छवि के फ़ाइल प्रकार की जांच कर सकते हैं।
आप वर्ग विशेषता का उपयोग करके छवि के चारों ओर सीमाओं और अन्य शैलियों को भी परिभाषित कर सकते हैं। हालाँकि, हम इसे बाद के ट्यूटोरियल में कवर करेंगे।
ऑनलाइन छवि फ़ाइलों के लिए आमतौर पर उपयोग की जाने वाली फ़ाइल प्रकार हैं : .jpg, .png, और (कम और कम) .gif।
ऑल्ट टेक्स्ट यह सुनिश्चित करने के लिए महत्वपूर्ण है कि आपकी साइट को खोज साइटों पर सही ढंग से रैंक किया गया है और आपकी साइट पर दृष्टिबाधित आगंतुकों के लिए भी।
<Img> टैग आम तौर पर इस प्रकार लिखा है:
<img src="yourimage.jpg" alt="Describe the image" height="X" width="X">
आइए इसे आजमाएं।
ऑल्ट टेक्स्ट के साथ अपनी खुद की इमेज बनाएं
परीक्षण कोड के साथ खिलवाड़ करने से न डरें - यह सीखने के दौरान मज़े करने का एक शानदार तरीका है।
अपनी पसंद की इमेज (.jpg, .png, .gif फॉर्मेट) को उसी फोल्डर में सेव करें जहां आपने index.html और page2.html को सेव किया है । इस छवि को " testpic.jpg " कहें ।
अपने HTML संपादक में एक नई लाइन पर निम्नलिखित कोड दर्ज करें :
<img src="testpic.jpg" alt="This is a test image" height="42" width="42">
सहेजें दबाएं और अपने ब्राउज़र में index.html पृष्ठ का पूर्वावलोकन करें ।
HTML सूची कैसे बनाएं
वेब डिज़ाइन में, 3 अलग-अलग प्रकार की सूचियाँ होती हैं जिन्हें आप अपनी साइट में जोड़ना चाह सकते हैं।
आदेशित सूचि
पहला <ol> है : यह सामग्री की एक आदेशित सूची है। उदाहरण के लिए:
एक वस्तु
एक और वस्तु
एक और यहाँ जाता है।
<ol> टैग के अंदर हम सूची में प्रत्येक आइटम को <li> </li> टैग के अंदर सूचीबद्ध करते हैं।
उदाहरण के लिए:
<ol>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ol>
अव्यवस्थित सूची
दूसरे प्रकार की सूची जिसे आप शामिल करना चाह सकते हैं वह है <ul> अनियंत्रित सूची। इसे बुलेट पॉइंट सूची के रूप में जाना जाता है और इसमें कोई संख्या नहीं होती है।
इसका एक उदाहरण है:
<ul>
<li>This is </li>
<li>An Unordered </li>
<li>List </li>
</ul>
परिभाषा सूची
अंत में, आप अपने पृष्ठ पर एक परिभाषा सूची <dl> शामिल करना चाह सकते हैं । <dl> सूची का एक उदाहरण इस प्रकार है:
एचटीएमएल
हाइपरटेक्स्ट मार्कअप भाषा एक प्रोग्रामिंग भाषा है जिसका उपयोग वेब पेज बनाने के लिए किया जाता है और इसे वेब ब्राउज़र द्वारा प्रस्तुत किया जाता है।
उपरोक्त के लिए प्रयुक्त कोड इस प्रकार है:
<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>
आइए इसे आजमाएं। index.html खोलें और एक नई लाइन पर, निम्न HTML दर्ज करें:
<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>
अब सेव को हिट करें और अपने ब्राउज़र में परिणाम देखें । यदि सब कुछ काम कर गया तो यह ऊपर दी गई जानकारी को प्रदर्शित करने वाली एक बुलेट-पॉइंट तालिका प्रदर्शित करेगा।
HTML में टेबल्स कैसे जोड़ें
एचटीएमएल टेबल्स
तालिकाओं को विभिन्न तरीकों से स्टाइल किया जा सकता है - Codepen.io परिवर्तनों का ट्रैक रखने के लिए लाइव पूर्वावलोकन प्रदान करता है।
अपनी वेबसाइट को साफ-सुथरा और व्यवस्थित रखने का दूसरा तरीका टेबल का उपयोग करना है।
अपनी वेबसाइट को लेआउट करने के लिए टेबल का उपयोग न करें । खोज इंजन इससे नफरत करते हैं और यह आमतौर पर एक बुरा विचार है। बस... नहीं। इसके बजाय हमारा CSS ट्यूटोरियल देखें ।
यह निश्चित रूप से इस ट्यूटोरियल का सबसे जटिल हिस्सा है, हालांकि, इसे सीखना निश्चित रूप से लंबे समय में भुगतान करेगा।
इसे ध्यान में रखते हुए, टेबल अभी भी आपके पेज पर सामग्री प्रस्तुत करने का एक उपयोगी तरीका हो सकता है ।
एक टेबल किससे मिलकर बनता है?
टेबल बनाते समय हमें <टेबल> ओपनिंग टैग के साथ एक एलिमेंट खोलना चाहिए । इस टैग के अंदर, हम तालिका पंक्तियों, <tr> और कोशिकाओं, <td> का उपयोग करके तालिका की संरचना करते हैं ।
HTML तालिका का एक उदाहरण इस प्रकार है:
<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Colunm 2 </td>
<td>Row 1 - Column 3 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>
यह प्रत्येक पंक्ति में 3 कोशिकाओं के साथ 2-पंक्ति तालिका तैयार करेगा।
तालिकाएँ काफी जटिल हो सकती हैं, इसलिए हमारे विशेष HTML तालिका ट्यूटोरियल को देखना सुनिश्चित करें ।
टेबल टैग
हालाँकि, इन टैगों पर ध्यान दें ताकि आप उन्हें पहचान सकें और अपने कौशल के विकास के साथ उनका उपयोग कर सकें ।
तालिका में प्रस्तुत किए गए टेबल टैग यहां दिए गए हैं - पूरी तरह से इरादा।
टेबल टैग अर्थ स्थान
<थेड> टेबल हेड तालिका में सबसे ऊपर
<tbody> टेबल बॉडी तालिका की सामग्री
<tfoot> टेबल फुट तालिका के नीचे
<कोलग्रुप> स्तंभ समूह तालिका के भीतर
<वें> टेबल हैडर टेबल हेडर के लिए डेटा सेल
टेबल्स, बॉर्डर्स, स्पेसिंग को आमतौर पर CSS का उपयोग करके स्टाइल किया जाता है लेकिन हम इसे बाद के ट्यूटोरियल में कवर करेंगे।
आइए एक टेबल बनाएं
अपने टेक्स्ट एडिटर में index.html पेज पर एक नई लाइन पर जाएं । निम्नलिखित एचटीएमएल कोड दर्ज करें:
<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>
सहेजें दबाएं और अपने ब्राउज़र में इसका पूर्वावलोकन करें ।
बधाई हो: आपने किया!
HTML दस्तावेज़ को कैसे बंद करें
आप हमारे पूर्ण शुरुआती HTML ट्यूटोरियल के अंत तक पहुँच चुके हैं ।
अंतिम चरण जिसे हमें पूरा करने की आवश्यकता है, वह निम्नलिखित HTML कोड का उपयोग करके प्रत्येक पृष्ठ के अंत में <body> और <html> टैग को बंद करना है:
</body>
</html>
इस गाइड में, आपने सीखा है कि बुनियादी HTML वेब पेज कैसे बनाए जाते हैं।
आपने इन पृष्ठों में शीर्षक, पाठ, चित्र, लिंक, सूचियाँ और बुनियादी तालिकाएँ जोड़ना भी सीख लिया है।
आगे क्या होगा?
अब आप इस ज्ञान का उपयोग इन विशेषताओं वाले अपने स्वयं के वेब पेज बनाने और उन्हें एक साथ जोड़ने के लिए कर सकते हैं।
हमारा सुझाव है कि आप विभिन्न चरों का उपयोग करके सीखे गए कोड के साथ प्रयोग करके अपने कौशल को और बढ़ाएँ। आप सीएसएस का उपयोग करके अपने पृष्ठों को सुंदर बनाने के तरीके के बारे में भी जानना चाहेंगे ।
अपनी खुद की वेबसाइट बनाने की शक्ति अब आपके हाथ में है।
समस्या निवारण
यदि चीजें अपेक्षित रूप से काम नहीं करती हैं, तो बस नीचे दिए गए उदाहरणों के सामने अपना HTML कोड जांचें ।
Index.html समस्या निवारण कोड:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This is my first website. It includes lots of information about my life.">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Welcome to <em>my</em> brand new website.</p>
<p>This site will be my <strong>new</strong> home on the web.</p>
<a href="/page2.html">Page2</a>
<img src="testpic.jpg" alt="This is a test image" height="42" width="42">
<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>
<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>
</body>
</html>
page2.html समस्या निवारण कोड:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This is my first website. It includes lots of information about my life.">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Welcome to <em>my</em> brand new website.</p>
<p>This site will be my <strong>new<strong> home on the web.</p>
<a href="http://www.google.com">Google</a>
</body>
</html>
हमारे अन्य HTML ट्यूटोरियल
हमारे HTML ट्यूटोरियल आपको सिखाते हैं कि आप अपने व्यवसाय के लिए एक व्यक्तिगत वेबसाइट या साइट कैसे बना सकते हैं, बिना आपको अनावश्यक सिद्धांत सीखने के लिए मजबूर किए।
हमारे सबसे लोकप्रिय शुरुआती ट्यूटोरियल में शामिल हैं:
एचटीएमएल टेबल
ये ट्यूटोरियल आपकी सटीक जरूरतों के लिए टेबल बनाने की प्रक्रिया में आपका मार्गदर्शन करते हैं। टेबल्स कभी प्राथमिक साधन थे जिनके द्वारा पृष्ठ रखे गए थे।
CSS को अपनाने के साथ, यह अब आवश्यक नहीं है। और अच्छे कारण के लिए, क्योंकि इसने ऐसे पृष्ठ बनाए जिन्हें बनाए रखना लगभग असंभव था। लेकिन डिस्प्ले टेबल के प्रयोजन के लिए, HTML आपके लिए आवश्यक सभी टूल प्रदान करता है।
लिंक
लिंक के लिए एक पृष्ठ से दूसरे पृष्ठ पर जाने के अलावा और भी बहुत कुछ है। इस ट्यूटोरियल में, आप सीखेंगे कि पृष्ठों को कैसे नेविगेट करें और फ़ाइलें कैसे डाउनलोड करें ।
आप यह भी सीखेंगे कि अपने लिंक को यथासंभव उपयोगकर्ता के अनुकूल कैसे बनाया जाए। लिंक HTML के मूल हैं इसलिए यह महत्वपूर्ण चीजें हैं।
फार्म
मार्केटिंग के साथ-साथ वेब एप्लिकेशन बनाने आदि के लिए फॉर्म महत्वपूर्ण हैं।
यह विस्तृत ट्यूटोरियल आपको सीएसएस और जावास्क्रिप्ट के साथ फॉर्म के सबसे उन्नत उपयोगों के लिए बहुत ही बुनियादी बातों से मार्गदर्शन करेगा ।
फोंट्स
एक समय में, फ़ॉन्ट एक HTML टैग था और इसने बनाए रखने योग्य वेब पेजों को एक बुरा सपना बना दिया। अब हम सीएसएस का उपयोग फोंट और उनकी विशेषताओं जैसे वजन, शैली और आकार को सेट करने के लिए करते हैं ।
और CSS का उपयोग करके, आप कोड की कुछ पंक्तियों को बदलकर अपने पृष्ठों के स्वरूप को लगातार बदलने की क्षमता के साथ सेट कर सकते हैं। यह ट्यूटोरियल सभी की व्याख्या करता है।
इमेजिस
img टैग और CSS के उपयोग से, आप अपनी इच्छानुसार कुछ भी कर सकते हैं।
लेकिन एचटीएमएल 5 के साथ, आपके पास pictureऔर figureतत्वों का जोड़ है। इस संपूर्ण ट्यूटोरियल के साथ छवियों को सही तरीके से करने का तरीका जानें ।
इंटरमीडिएट और उन्नत ट्यूटोरियल
हमारे पास मध्यवर्ती और उन्नत HTML शिक्षार्थियों के लिए भी बहुत सारे विषय हैं:
सीएसएस ट्यूटोरियल
CCS, कैस्केडिंग स्टाइल शीट, आपको अपने वेब पेजों को डिज़ाइन और अलंकृत करने की अनुमति देता है।
यह ट्यूटोरियल आपको शुरू से ही सीएसएस में पारंगत होने के लिए ले जाता है ताकि आप जटिल पेज बना सकें जो आसानी से बनाए रखा जा सके।
जावास्क्रिप्ट
एचटीएमएल जावास्क्रिप्ट
जावास्क्रिप्ट का उपयोग अक्सर वेब पेजों में गतिशील तत्वों (जैसे उलटी गिनती घड़ी) को जोड़ने के लिए किया जाता है।
जावास्क्रिप्ट यकीनन HTML के बाद सबसे महत्वपूर्ण वेब कोडिंग भाषा है। आपके द्वारा देखी जाने वाली अधिकांश वेबसाइटें कम से कम थोड़ी सी जावास्क्रिप्ट कोडिंग का उपयोग करती हैं।
एचटीएमएल और सीएसएस के साथ, जावास्क्रिप्ट वेबपेज डिजाइन और निर्माण की त्रिमूर्ति बनाता है ।
यह ट्यूटोरियल मानता है कि आप कुछ भी नहीं जानते हैं और आपको इस आवश्यक प्रोग्रामिंग भाषा के साथ जाने के लिए प्रेरित करता है। यह आपको AJAX और jQuery जैसे उन्नत विषयों से भी परिचित कराता है।
एचटीएमएल 5
वीडियो: यह 3 मिनट का क्रैश कोर्स HTML5 को समझने का एक शानदार तरीका है।
HTML5 ने सिमेंटिक और मल्टीमीडिया तत्वों जैसी चीजों के साथ वेबपेज मार्कअप में क्रांति ला दी है । उन सभी नई अच्छाइयों के बारे में पता करें जिनकी खोज की जानी है।
सिमेंटिक मार्कअप
यह ट्यूटोरियल आपको सिमेंटिक मार्कअप से परिचित कराता है जो आपको पेज बनाने की अनुमति देता है ताकि उनकी संरचना उनकी सामग्री को प्रकट करे।
यह विशेष रूप से उपयोगी है क्योंकि खोज इंजन अधिक से अधिक उन्नत हो जाते हैं - उन्हें उपयोगकर्ताओं को वह सही जानकारी खोजने की अनुमति देता है जिसकी वे तलाश कर रहे हैं।
तार्किक टैग
आपने देखा होगा कि कुछ लोग iइटैलिक के लिए टैग का उपयोग करते हैं और इसके बजाय emटैग का उपयोग करते हैं ।
ऐसा इसलिए है क्योंकि iटैग सिर्फ एक स्वरूपण टैग है और इस प्रकार वास्तव में सीएसएस के साथ पूरा किया जाना चाहिए। इसका emअर्थ है: पाठ पर जोर दिया गया है।
तार्किक टैग पसंद करते हैं emऔर citeउसी तरह महत्वपूर्ण हैं जैसे सिमेंटिक मार्कअप। इस संक्षिप्त चर्चा में और जानें।
HTML संदर्भ मार्गदर्शिका
इस बीच, हमारे विस्तृत HTML टैग संदर्भ से आप से <a>तक के प्रत्येक HTML टैग के बारे में अधिक जानकारी प्राप्त कर सकते हैं <xmp>।
प्रत्येक टैग संदर्भ में पृष्ठभूमि और उदाहरण शामिल होते हैं , जो यह दिखाते हैं कि विचाराधीन टैग का उपयोग कैसे किया जाता है। जब आप HTML को कोड करते समय समस्याओं का निवारण करना चाहते हैं तो यह एकदम सही है।
नीचे कुछ सबसे सामान्य टैग दिए गए हैं — जिनका उपयोग आपके सामने आने वाली लगभग हर वेबसाइट द्वारा किया जाता है:
Button उपनाम
एचटीएमएल बटन
CSS और JS का उपयोग करके बटनों को आश्चर्यजनक तरीकों से अनुकूलित किया जा सकता है। यह Codepen.io है - एक ऑनलाइन एडिटिंग और कोड शेयरिंग प्लेटफॉर्म।
एक टैग जो buttonएक वेबपेज पर डालता है । यह जावास्क्रिप्ट के साथ संयुक्त किया जाना चाहिए क्रम में कुछ भी करने में। यह पृष्ठ आपको आवश्यक सभी विवरण प्रदान करता है।
Anchor उपनाम
नए HTML कोडर्स के एहसास की तुलना में लिंक कहीं अधिक शक्तिशाली हैं। aटैग का अधिकतम उपयोग करने के लिए आपको जो कुछ जानने की आवश्यकता है, उसे प्राप्त करें ।
Link उपनाम
linkटैग भ्रमित किया जा सकता है, क्योंकि यह "लिंक" (के साथ परिभाषित के साथ मिश्रण करने के लिए आसान है aटैग)।
लेकिन linkयह एक बहुत शक्तिशाली टैग है जो आपको एक HTML दस्तावेज़ को किसी बाहरी संसाधन जैसे CSS फ़ाइल से लिंक करने की अनुमति देता है । यहां वह सब जानें जो आपको जानना चाहिए।
छवि हेरफेर
आईएमजी कोड उदाहरण
यह विभिन्न विशेषताओं वाला एक छवि कोड है।
हालांकि एचटीएमएल imgटैग के साथ छवियों को प्रदर्शित करना आसान बनाता है , कुछ जावास्क्रिप्ट का उपयोग करके, आप फ्लाई पर छवियों को बदल सकते हैं ।
यह ट्यूटोरियल आपको दिखाता है कि कैसे।
चरित्र कोड
HTML का एक और बड़ा पहलू ® ( &reg;) और © ( &copy;) जैसी गैर-कीबोर्ड कुंजियों का उपयोग करने की इसकी क्षमता है ।
यह संदर्भ आपको इन प्रतीकों का पूर्ण उपयोग करने के लिए आवश्यक जानकारी प्रदान करता है ।
शीर्षकों
शीर्षक पृष्ठ को तोड़कर टेक्स्ट को अलग दिखाने का एक तरीका है।
अनुच्छेद
पैराग्राफ लाइन स्पेसिंग निर्धारित करते हैं।
तिर्छा
वर्ड प्रोसेसर की तरह ही इटैलिक टेक्स्ट बनाएं ।
मोटा
बोल्ड टेक्स्ट कीवर्ड पर जोर देता है।
लंगर
एंकर टैग का उपयोग आमतौर पर href विशेषता के संयोजन में लिंक बनाने के लिए किया जाता है ।
अव्यवस्थित सूची
बुलेट बिंदुओं की अनगिनत सूचियां अनियंत्रित सूची टैग का उपयोग करती हैं।
सामग्री सूचीबद्ध करें
सूची में प्रत्येक पंक्ति एक सूची आइटम टैग द्वारा संलग्न है।
ब्लॉककोट
लोगों के उद्धरण संलग्न करने के लिए Blockquote टैग का उपयोग किया जाता है। यह टैग उद्धरण को उसके चारों ओर के पाठ से अलग करने में मदद करता है।
क्षैतिज कायदा
एक क्षैतिज नियम एक सीधी रेखा है जिसका उपयोग आमतौर पर किसी वेबपेज के क्षेत्रों को विभाजित करने के लिए किया जाता है।
छवि
अपने पेज में चित्रों को कोड करने का तरीका जानने के लिए इमेज टैग सीखें।
विभाजन
डिवीजन टैग सीएसएस के भीतर विशिष्ट लेआउट शैलियों को परिभाषित करता है।
HTML विशेषताएँ संदर्भ मार्गदर्शिका
एचटीएमएल विशेषताओं अनुभाग है कि आप जानते हैं और पसंद करते समय आप कुछ करने के लिए शुरू तुम पास और व्यक्तिगत एचटीएमएल विशेषताओं के साथ उठना अनुमति देने के लिए डिज़ाइन किया गया है उन्नत विशेषताओं रास्ते।
हमारी सबसे लोकप्रिय विशेषताओं में शामिल हैं :
<img src="">- प्रदर्शित करने के लिए छवि चुनने का तरीका जानें ।
<img alt="">— यह उन लोगों के लिए छवि का नाम निर्धारित करता है जो किसी कारण या किसी अन्य कारण से छवि नहीं देख सकते हैं।
<a target="">- लिंक को वर्तमान पृष्ठ भरने की आवश्यकता नहीं है। अन्य, अक्सर बेहतर, विकल्प होते हैं।
<a href="">- मूल लिंक विशेषता सेट करती है जहां यह उपयोगकर्ता को .
<body background-*="">— वेबपेज का बैकग्राउंड कलर, इमेज या और भी बहुत कुछ सेट करना सीखें ।
<table bordercolor=""> - अपनी टेबल के बॉर्डर कलर को सेट करने का तरीका जानें।
एचटीएमएल धोखा पत्र
यदि आपको अपनी HTML क्षमताओं पर पूरा भरोसा है, लेकिन कभी-कभी अपने काम की दोबारा जांच करने का मन करता है तो हमारे HTML चीट शीट से आगे नहीं देखें ।
यह आसान मार्गदर्शिका आपको एक सुपर-कॉम्पैक्ट, और समझने में आसान प्रारूप में HTML के बारे में जानने के लिए आवश्यक सब कुछ दिखाएगी । यह विशेष टैग और विशिष्ट विशेषताओं के बारे में वर्णानुक्रम में जानकारी प्रदान करता है ।
आसान पुनर्प्राप्ति के लिए आप पृष्ठ को बुकमार्क कर सकते हैं। या आप हमारी पीडीएफ का प्रिंट आउट ले सकते हैं ताकि आप इसे अपने डेस्क के पास रख सकें।
HTML.com ब्लॉग
हमारे ब्लॉग में इंटरनेट के सभी कोनों को कवर करने वाली पोस्ट शामिल हैं।
ब्रिटिश सरकार ने इन 10 वेबसाइटों को क्यों बैन किया?
यूके एक "वयस्क सामग्री फ़िल्टर" का उपयोग करता है और कई सम्मानित वेबसाइटों को सेंसर करता है। लेकिन "वयस्क सामग्री" से उनका क्या मतलब है, आपको आश्चर्य हो सकता है।
अपनी तस्वीरों को ऑनलाइन पोस्ट करने और साझा करने के लिए 100+ स्थान
अपनी छवियों को अपलोड करने और प्रदर्शित करने के लिए कई दर्जनों स्थान। अपनी छवियों को अपनी वेबसाइट से दूर होस्ट करना अक्सर बेहतर होता है . यहां कई विकल्प दिए गए हैं।
Google कैलेंडर: 50 थीम, भाड़े और ऐड-ऑन
अपने Google कैलेंडर को अपनी वेबसाइट में एकीकृत करने का तरीका जानें।
Homebrew Nintendo Wii हैक्स और मोड
100 बढ़िया Wii टिप्स और ट्रिक्स सीखें।
20 सर्वश्रेष्ठ इंटरनेट घोटाले की कहानियां
उन सभी आश्चर्यजनक इंटरनेट घोटालों के बारे में पढ़ें जिन्होंने दुनिया को हिलाकर रख दिया है।
डॉक्सिंग क्या है?
ऑनलाइन गोपनीयता और अपनी व्यक्तिगत जानकारी को दुनिया के सामने जारी करने की प्रक्रिया के बारे में पता करें।
वेब होस्टिंग के लिए HTML.com गाइड
उन बंडलों पर नज़र रखें जिनमें साइट निर्माता और अतिरिक्त शामिल हैं – वे उपलब्ध हैं।
यदि आपने अपनी वेबसाइट पहले ही बना ली है तो वेब होस्टिंग के लिए HTML.com गाइड के अलावा और कुछ नहीं देखें ।
हम आपकी वेबसाइट के लिए सर्वश्रेष्ठ होस्टिंग प्रदाता खोजने में आपकी सहायता करेंगे ।
चाहे आप एक वर्डप्रेस होस्ट की खोज कर रहे हों , अपनी पहली वेबसाइट के लिए एक सस्ता और हंसमुख स्थान, या एक समर्पित होस्टिंग समाधान, हमारे होस्टिंग अनुभाग में सभी बड़े नाम वाले होस्टिंग प्रदाताओं और कुछ छोटी कंपनियों की भी समीक्षाएं हैं, जिनमें शामिल हैं:
साइट ग्राउंड
यह सबसे अच्छी होस्टिंग कंपनियों में से एक है, जिसकी आपको जिस भी तरह की होस्टिंग की जरूरत है, उसके लिए पूरी तरह से योजनाएँ हैं ।
ब्लूहोस्ट
आधिकारिक तौर पर वर्डप्रेस द्वारा अनुशंसित होने वाला पहला होस्ट । लेकिन वे किसी भी वेबसाइट के लिए एक अच्छे होस्ट हैं।
आईपेज
आसपास की सबसे सस्ती होस्टिंग कंपनियों में से एक। यदि आप गुणवत्ता और सुविधाओं को खोए बिना लागत कम रखना चाहते हैं , तो iPage एक अच्छा विकल्प है।
HostGator
सर्वश्रेष्ठ ऑल-अराउंड होस्टिंग कंपनियों में से एक - अच्छी तरह से जाँच के लायक।
WP इंजन
हाई-एंड वर्डप्रेस होस्टिंग के लिए नंबर एक होस्ट ।
अपने HTML कौशल में सुधार करें
अब जब आपने HTML के साथ शुरुआत कर ली है, तो आप अपने कौशल में सुधार कर सकते हैं । वेब पेजों के साथ आप जो कुछ भी कर सकते हैं उसे देखना रोमांचक है। की जाँच करें हमारे ट्यूटोरियल के और अधिक और अब सीखना प्रारंभ करें!
Thank You For Reading