17 सरल HTML कोड उदाहरण जो आप 10 मिनट में सीख सकते हैं

17 सरल HTML कोड उदाहरण जो आप 10 मिनट में सीख सकते हैं

भले ही आधुनिक वेबसाइटें आम तौर पर उपयोगकर्ता के अनुकूल इंटरफेस के साथ बनाई जाती हैं, लेकिन कुछ बुनियादी HTML को जानना उपयोगी होता है। यदि आप निम्नलिखित 17 HTML उदाहरण टैग (और कुछ अतिरिक्त) जानते हैं, तो आप स्क्रैच से एक मूल वेबपेज बनाने में सक्षम होंगे या वर्डप्रेस जैसे ऐप द्वारा बनाए गए कोड को ट्वीक कर पाएंगे।





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



1.

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





हालांकि यह वास्तव में एक HTML टैग नहीं है, फिर भी यह जानना अच्छा है।

2.

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



3.

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

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



चार।

यह टैग आपके पेज का टाइटल सेट करता है। आपको बस इतना करना है कि अपना शीर्षक टैग में डालें और इसे इस तरह बंद करें (मैंने संदर्भ दिखाने के लिए हेडर टैग भी शामिल किए हैं):


My Website

यह वह नाम है जो ब्राउज़र में खोले जाने पर टैब शीर्षक के रूप में प्रदर्शित होगा।



5.

शीर्षक टैग की तरह, मेटाडेटा आपके पृष्ठ के शीर्षलेख क्षेत्र में रखा जाता है। मेटाडेटा मुख्य रूप से खोज इंजन द्वारा उपयोग किया जाता है, और यह आपके पृष्ठ पर मौजूद जानकारी के बारे में जानकारी है। कई अलग-अलग मेटा फ़ील्ड हैं, लेकिन इनमें से कुछ सबसे अधिक उपयोग किए जाते हैं:

  • विवरण : आपके पृष्ठ का एक मूल विवरण।
  • कीवर्ड : आपके पृष्ठ पर लागू होने वाले खोजशब्दों का चयन।
  • लेखक : आपके पेज के लेखक।
  • व्यूपोर्ट : यह सुनिश्चित करने के लिए एक टैग कि आपका पृष्ठ सभी उपकरणों पर अच्छा दिखता है।

यहां एक उदाहरण दिया गया है जो इस पृष्ठ पर लागू हो सकता है:




'व्यूपोर्ट' टैग में सामग्री के रूप में हमेशा 'चौड़ाई=उपकरण-चौड़ाई, आरंभिक-पैमाना=1.0' होना चाहिए ताकि यह सुनिश्चित हो सके कि आपका पृष्ठ मोबाइल और डेस्कटॉप उपकरणों पर अच्छी तरह प्रदर्शित हो।

6.

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

आपके वेबपेज की सारी सामग्री इन टैग्स के बीच में जाती है। यह जितना आसान लगता है उतना ही आसान है:


Everything you want displayed on your page.

7.

थोड़ा कम बड़ा हैडर


उप हैडर

नतीजा:

जैसा कि आप देख सकते हैं, वे प्रत्येक स्तर पर छोटे होते जाते हैं।

8.

अनुच्छेद टैग एक नया अनुच्छेद प्रारंभ करता है। यह आमतौर पर दो लाइन ब्रेक सम्मिलित करता है।

उदाहरण के लिए, पिछली पंक्ति और इस के बीच के विराम को देखें। यही एक

टैग करेगा।

Your first paragraph.


Your second paragraph.

नतीजा:

आपका पहला पैराग्राफ।

आपका दूसरा पैराग्राफ।

आप भी कर सकते हैं सीएसएस शैलियों का प्रयोग करें आपके पैराग्राफ टैग में, इस तरह जो टेक्स्ट का आकार बदलता है:

This is 50% larger text.

नतीजा:

9.

लाइन ब्रेक टैग सिंगल लाइन ब्रेक को सम्मिलित करता है:

The first line.

The second line (close to the first one).

नतीजा:

इसी तरह काम करना है

उपनाम। यह आपके पृष्ठ पर एक क्षैतिज रेखा खींचता है और पाठ के अनुभागों को अलग करने के लिए अच्छा है।

10.

यह टैग महत्वपूर्ण टेक्स्ट को परिभाषित करता है। सामान्य तौर पर, इसका मतलब है कि यह बोल्ड होगा। हालाँकि, बनाने के लिए CSS का उपयोग करना संभव है पाठ अलग तरह से प्रदर्शित करता है।

विंडोज़ से गूगल ड्राइव को कैसे हटाएं

हालाँकि, आप सुरक्षित रूप से उपयोग कर सकते हैं बोल्ड टेक्स्ट के लिए।

Very important things you want to say.

नतीजा:

बहुत जरूरी बातें जो आप कहना चाहते हैं।

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

ग्यारह।

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

An emphasized line.

नतीजा:

एक जोर देने वाली रेखा।

NS टैग अभी भी काम करता है, लेकिन फिर से, यह संभव है कि इसे HTML के भविष्य के संस्करणों में बहिष्कृत कर दिया जाएगा।

12.

NS , या एंकर, टैग आपको लिंक बनाने देता है। एक साधारण लिंक इस तरह दिखता है:

MUO . पर जाएँ

'Href' विशेषता लिंक के गंतव्य की पहचान करती है। कई मामलों में, यह दूसरी वेबसाइट होगी। यह एक फाइल भी हो सकती है, जैसे कोई इमेज या पीडीएफ।

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

Go to MUO in a new tab

नतीजा:

नए टैब में MUO पर जाएं

'शीर्षक' विशेषता एक टूलटिप बनाती है। यह कैसे काम करता है यह देखने के लिए नीचे दिए गए लिंक पर होवर करें:

Hover over this to see the tool tip

नतीजा:

टूल टिप देखने के लिए इस पर होवर करें

13.

अगर आप अपने पेज में कोई इमेज एम्बेड करना चाहते हैं, तो आपको इमेज टैग का इस्तेमाल करना होगा. आप इसे सामान्य रूप से 'src' विशेषता के संयोजन में उपयोग करेंगे। यह छवि के स्रोत को इस तरह निर्दिष्ट करता है:

नतीजा:

नए पीसी पर स्थापित करने के लिए कार्यक्रम

अन्य विशेषताएँ उपलब्ध हैं, जैसे 'ऊँचाई,' 'चौड़ाई,' और 'alt'। यहां बताया गया है कि यह कैसा दिख सकता है:

the name of your image

जैसा कि आप उम्मीद कर सकते हैं, 'ऊंचाई' और 'चौड़ाई' विशेषताएँ छवि की ऊँचाई और चौड़ाई निर्धारित करती हैं। सामान्य तौर पर, उनमें से केवल एक को सेट करना एक अच्छा विचार है ताकि छवि सही ढंग से मापी जा सके। यदि आप दोनों का उपयोग करते हैं, तो आप एक खिंची हुई या छितरी हुई छवि के साथ समाप्त हो सकते हैं।

'ऑल्ट' टैग ब्राउज़र को बताता है कि अगर छवि प्रदर्शित नहीं की जा सकती है तो कौन सा टेक्स्ट प्रदर्शित करना है और किसी भी छवि के साथ शामिल करना एक अच्छा विचार है। यदि किसी के पास विशेष रूप से धीमा कनेक्शन या पुराना ब्राउज़र है, तो वे अभी भी इस बात का अंदाजा लगा सकते हैं कि आपके पृष्ठ पर क्या होना चाहिए।

14.

    आदेशित सूची टैग आपको एक आदेशित सूची बनाने देता है। सामान्य तौर पर, इसका मतलब है कि आपको एक क्रमांकित सूची मिलेगी। सूची में प्रत्येक आइटम को सूची आइटम टैग की आवश्यकता होती है (

  1. ), तो आपकी सूची इस तरह दिखेगी:


    1. First thing

    2. Second thing

    3. Third thing

    नतीजा:

    1. पहली बात
    2. दूसरी बात
    3. तीसरी बात

    HTML5 में, आप उपयोग कर सकते हैं

      संख्याओं के क्रम को उलटने के लिए। और आप शुरुआती मान को start विशेषता के साथ सेट कर सकते हैं।

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

        पंद्रह.

          अनियंत्रित सूची अपने आदेशित समकक्ष की तुलना में बहुत सरल है। यह सिर्फ एक बुलेटेड सूची है।


          • First item

          • Second item

          • Third item

          नतीजा:

          • पहला आइटम
          • दूसरा आइटम
          • तीसरा आइटम

          अव्यवस्थित सूचियों में 'प्रकार' विशेषताएँ भी होती हैं, और आप इसे 'डिस्क', 'सर्कल' या 'वर्ग' पर सेट कर सकते हैं।

          16.

          फ़ॉर्मेटिंग के लिए तालिकाओं का उपयोग करते समय, बहुत बार ऐसा होता है जब आप अपने पृष्ठ पर जानकारी को खंडित करने के लिए पंक्तियों और स्तंभों का उपयोग करना चाहेंगे। तालिका को काम करने के लिए कई टैग की आवश्यकता होती है। यहाँ नमूना HTML कोड है:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          NS

          तथा
          टैग तालिका के प्रारंभ और अंत को निर्दिष्ट करते हैं। NSटैग में सभी तालिका सामग्री शामिल है।

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

          नतीजा:

          पहला कॉलमदूसरा कॉलम
          पंक्ति 1, कॉलम 1पंक्ति 1, कॉलम 2
          पंक्ति २, कॉलम १पंक्ति २, स्तंभ २

          17.

          जब आप किसी अन्य वेबसाइट या व्यक्ति को उद्धृत कर रहे हों और आप उद्धरण को अपने शेष दस्तावेज़ से अलग करना चाहते हैं, तो ब्लॉकक्वाट टैग का उपयोग करें। आपको बस इतना करना है कि ब्लॉकक्वाट टैग खोलने और बंद करने में उद्धरण संलग्न करें:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          नतीजा:

          वेब जैसा कि मैंने इसकी परिकल्पना की थी, हमने इसे अभी तक नहीं देखा है। भविष्य अभी भी अतीत की तुलना में बहुत बड़ा है।

          उपयोग की जाने वाली सटीक स्वरूपण आपके द्वारा उपयोग किए जा रहे ब्राउज़र या आपकी साइट के CSS पर निर्भर हो सकती है। लेकिन टैग वही रहता है।

          एचटीएमएल कोड नमूने

          इन 17 HTML उदाहरणों के साथ, आपको एक साधारण वेबसाइट बनाने में सक्षम होना चाहिए। वे कैसे काम करते हैं, यह महसूस करने के लिए आप अभी ऑनलाइन टेक्स्ट एडिटर में उन सभी का परीक्षण कर सकते हैं।

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

          साझा करना साझा करना कलरव ईमेल बेसिक कोडिंग सीखना चाहते हैं? अपने खाली समय में 5 बाइट-साइज़ कोडिंग ऐप्स आज़माएं

          बुनियादी कोडिंग सीखना चाहते हैं लेकिन आपके पास कम समय है? ये बाइट-साइज़ कोडिंग ऐप्स आपके व्यस्त दिन के कुछ ही मिनटों का समय लेंगे।

          आगे पढ़िए           संबंधित विषय
          • प्रोग्रामिंग
          • Wordpress
          • एचटीएमएल
          • वेब विकास
          • कोडिंग ट्यूटोरियल
          लेखक के बारे में एंडी बेट्स(२२१ लेख प्रकाशित)

          एंडी एक पूर्व प्रिंट पत्रकार और पत्रिका संपादक हैं जो 15 वर्षों से प्रौद्योगिकी के बारे में लिख रहे हैं। उस समय में उन्होंने अनगिनत प्रकाशनों में योगदान दिया है और बड़ी तकनीकी कंपनियों के लिए कॉपी राइटिंग का काम किया है। उन्होंने मीडिया के लिए विशेषज्ञ टिप्पणी भी प्रदान की है और उद्योग की घटनाओं में पैनल की मेजबानी की है।

          एंडी बेट्स की ओर से ज़्यादा

          हमारे न्यूज़लेटर की सदस्यता लें

          तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

          सब्सक्राइब करने के लिए यहां क्लिक करें