17 सरल HTML कोड उदाहरण आप 10 मिनट में सीख सकते हैं
विज्ञापन
भले ही आधुनिक वेबसाइटों को आमतौर पर उपयोगकर्ता के अनुकूल इंटरफेस के साथ बनाया जाता है, लेकिन कुछ मूल HTML को जानना उपयोगी होता है। यदि आप निम्नलिखित 17 HTML उदाहरण टैग्स (और कुछ एक्स्ट्रा) जानते हैं, तो आप एक मूल वेबपेज बना पाएंगे, जो वर्डप्रेस जैसे ऐप द्वारा बनाए गए कोड को स्क्रैच या ट्विक कर देगा।
हमने अधिकांश टैग के लिए आउटपुट के साथ HTML कोड उदाहरण प्रदान किए हैं। यदि आप उन्हें कार्रवाई में देखना चाहते हैं, तो लेख के अंत में नमूना HTML फ़ाइल डाउनलोड करें। आप इसके साथ एक टेक्स्ट एडिटर में खेल सकते हैं और इसे ब्राउजर में लोड करके देख सकते हैं कि आपके बदलाव क्या हैं।
1।
आपके द्वारा बनाए गए प्रत्येक HTML दस्तावेज़ की शुरुआत में आपको इस टैग की आवश्यकता होगी। यह सुनिश्चित करता है कि एक ब्राउज़र जानता है कि यह HTML पढ़ रहा है, और यह HTML5, नवीनतम संस्करण की अपेक्षा करता है।
हालांकि यह वास्तव में एक HTML टैग नहीं है, फिर भी यह जानना अच्छा है।
2।
यह एक और टैग है जो एक ब्राउज़र को बताता है कि यह HTML पढ़ रहा है। DOCTYPE टैग के बाद टैग सीधे चला जाता है, और आप इसे अपनी फ़ाइल के अंत में टैग के साथ बंद कर देते हैं। आपके दस्तावेज़ में सब कुछ इन टैगों के बीच जाता है।
3।
टैग आपकी फ़ाइल के शीर्ष लेख अनुभाग को शुरू करता है। यहां जाने वाला सामान आपके वेबपेज पर दिखाई नहीं देता है। इसके बजाय, इसमें खोज इंजन के लिए मेटाडेटा और आपके ब्राउज़र के लिए जानकारी शामिल है।
मूल पृष्ठों के लिए, टैग में आपका शीर्षक होगा, और यह इसके बारे में है। लेकिन कुछ अन्य चीजें हैं जिन्हें आप शामिल कर सकते हैं, जिन्हें हम एक पल में खत्म कर देंगे।
4।
यह टैग आपके पृष्ठ का शीर्षक सेट करता है। आपको बस अपना शीर्षक टैग में डालना होगा और इसे बंद करना होगा, इस तरह (मैंने हेडर टैग शामिल किया है, साथ ही):
My Website वह नाम जो किसी ब्राउज़र में खोले जाने पर टैब शीर्षक के रूप में प्रदर्शित होगा।
5।
शीर्षक टैग की तरह, मेटाडेटा को आपके पृष्ठ के शीर्ष लेख क्षेत्र में रखा जाता है। मेटाडेटा मुख्य रूप से खोज इंजन द्वारा उपयोग किया जाता है, और आपके पृष्ठ पर क्या है, इसके बारे में जानकारी है। कई अलग-अलग मेटा फ़ील्ड हैं, लेकिन ये कुछ सबसे अधिक उपयोग किए जाने वाले हैं:
- विवरण -अपने पृष्ठ का मूल विवरण।
- कीवर्ड- आपके पृष्ठ पर लागू होने वाले कीवर्ड का चयन।
- लेखक -आपके पृष्ठ का लेखक।
- यह सुनिश्चित करने के लिए कि आपका पृष्ठ सभी उपकरणों पर अच्छा लग रहा है, व्यूपोर्ट –ए टैग।
यहाँ एक उदाहरण है जो इस पृष्ठ पर लागू हो सकता है:
"व्यूपोर्ट" टैग में हमेशा "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1.0" होनी चाहिए क्योंकि यह सुनिश्चित करने के लिए कि आपका पृष्ठ मोबाइल और डेस्कटॉप उपकरणों पर अच्छी तरह से प्रदर्शित हो।
6।
हेडर सेक्शन को बंद करने के बाद, आप बॉडी के पास जाते हैं। आप इसे टैग के साथ खोलें, और इसे टैग के साथ बंद करें। यह आपकी फ़ाइल के अंत में, टैग से ठीक पहले जाता है।
आपके सभी वेबपृष्ठ की सामग्री इन टैगों के बीच में जाती है। यह जितना आसान लगता है उतना ही सरल है:
Everything you want displayed on your page. 7।
टैग आपके पृष्ठ पर एक स्तर-एक शीर्ष लेख को परिभाषित करता है। यह आमतौर पर शीर्षक होगा, और आदर्श रूप से प्रत्येक पृष्ठ पर केवल एक ही होगा।
खंड-दो हेडर को परिभाषित करता है जैसे कि अनुभाग हेडर, स्तर-तीन उप-शीर्षकों, और इसी तरह, नीचे तक । एक उदाहरण के रूप में, इस लेख में टैग के नाम स्तर-दो हेडर हैं। बड़ा और महत्वपूर्ण हैडर
थोड़ा कम हैडर
उप-हैडर
। एक उदाहरण के रूप में, इस लेख में टैग के नाम स्तर-दो हेडर हैं। बड़ा और महत्वपूर्ण हैडर
थोड़ा कम हैडर
उप-हैडर
बड़ा और महत्वपूर्ण हैडर
थोड़ा कम हैडर
उप-हैडर
नतीजा:
जैसा कि आप देख सकते हैं, वे प्रत्येक स्तर पर छोटे हो जाते हैं।
8।
पैराग्राफ टैग एक नया पैराग्राफ शुरू करता है। यह आमतौर पर दो लाइन ब्रेक सम्मिलित करता है।
उदाहरण के लिए, पिछली पंक्ति और इस एक के बीच के विराम पर देखें। यही एक है
टैग करेगा।
आपका पहला पैराग्राफ।
आपका दूसरा पैराग्राफ।
नतीजा:
आपका पहला पैराग्राफ।
आपका दूसरा पैराग्राफ।
आप अपने पैराग्राफ टैग में सीएसएस शैलियों का उपयोग कर सकते हैं, इस तरह से जो पाठ का आकार बदलता है:
20% बड़ा पाठ
नतीजा:
20% बड़ा पाठ
अपने टेक्स्ट को स्टाइल करने के लिए CSS का उपयोग करने का तरीका जानने के लिए, इन HTML और CSS ट्यूटोरियल्स को देखें।
9।
लाइन ब्रेक टैग एकल लाइन ब्रेक सम्मिलित करता है:
पहली पंक्ति।
दूसरी पंक्ति (पहले एक के करीब)।
नतीजा:
पहली पंक्ति।
दूसरी पंक्ति (पहले एक के करीब)।
इसी तरह से काम करना है
टैग। यह आपके पृष्ठ पर एक क्षैतिज रेखा खींचता है और पाठ के अनुभागों को अलग करने के लिए अच्छा है।
10।
यह टैग महत्वपूर्ण पाठ को परिभाषित करता है। सामान्य तौर पर, इसका मतलब है कि यह बोल्ड होगा। हालाँकि, पाठ प्रदर्शन को अलग तरह से बनाने के लिए CSS का उपयोग करना संभव है ।
हालाँकि, आप सुरक्षित रूप से बोल्ड टेक्स्ट का उपयोग कर सकते हैं ।
Very important things you want to say. नतीजा:
बहुत महत्वपूर्ण बातें जो आप कहना चाहते हैं।
यदि आप टेक्स्ट को बोल्ड करने के टैग से परिचित हैं , तो भी आप इसका उपयोग कर सकते हैं। इसकी कोई गारंटी नहीं है कि यह HTML के भविष्य के संस्करणों में काम करना जारी रखेगा, लेकिन अभी के लिए, यह काम करता है।
1 1।
जैसे और संबंधित हैं। टैग पर जोर दिया पाठ की पहचान करता है, जिसका अर्थ है कि आम तौर पर यह इटैलिकाइज़ हो जाएगा। फिर, इस बात की संभावना है कि सीएसएस जोर से पाठ प्रदर्शन को अलग तरीके से बनाएगा।
An emphasized line. नतीजा:
एक जोर दिया हुआ रेखा।
टैग अभी भी काम करता है, लेकिन फिर से, यह संभव है कि इसे HTML के भविष्य के संस्करणों में चित्रित किया जाएगा।
12।
, या एंकर, टैग आपको लिंक बनाने देता है। एक सरल लिंक इस तरह दिखता है:
Go to MakeUseOf नतीजा:
MakeUseOf पर जाएं
"Href" विशेषता लिंक के गंतव्य को पहचानती है। कई मामलों में, यह एक और वेबसाइट होगी। यह एक फ़ाइल भी हो सकती है, जैसे एक छवि या एक पीडीएफ।
अन्य उपयोगी विशेषताओं में "लक्ष्य" और "शीर्षक" शामिल हैं। लक्ष्य विशेषता का उपयोग लगभग विशेष रूप से एक नए टैब या विंडो में लिंक खोलने के लिए किया जाता है, जैसे:
Go to MakeUseOf in a new tab नतीजा:
एक नए टैब में MakeUseOf पर जाएं
"शीर्षक" विशेषता एक टूलटिप बनाता है। नीचे दिए गए लिंक पर होवर करें कि यह कैसे काम करता है:
Hover over this to see the tool tip नतीजा:
टूल टिप देखने के लिए इस पर होवर करें
13। ![]()
यदि आप अपने पृष्ठ में एक छवि एम्बेड करना चाहते हैं, तो आपको छवि टैग का उपयोग करना होगा। आप सामान्य रूप से "src" विशेषता के साथ संयोजन में इसका उपयोग करेंगे। यह इस तरह से छवि के स्रोत को निर्दिष्ट करता है:
नतीजा:
अन्य विशेषताएँ उपलब्ध हैं, जैसे "ऊँचाई, " "चौड़ाई, " और "ऊँचाई।" यहाँ बताया गया है कि यह कैसे दिख सकता है:
जैसा कि आप उम्मीद कर सकते हैं, "ऊँचाई" और "चौड़ाई" विशेषताएँ छवि की ऊँचाई और चौड़ाई निर्धारित करती हैं। सामान्य तौर पर, यह एक अच्छा विचार है कि उनमें से किसी एक को ही सेट किया जाए ताकि छवि सही तरीके से बन सके। यदि आप दोनों का उपयोग करते हैं, तो आप एक विस्तारित या स्क्विट छवि के साथ समाप्त हो सकते हैं।
"ऑल्ट" टैग ब्राउज़र को बताता है कि यदि छवि प्रदर्शित नहीं की जा सकती है तो पाठ को क्या प्रदर्शित करना है और किसी भी छवि के साथ शामिल करना एक अच्छा विचार है। यदि किसी के पास विशेष रूप से धीमा कनेक्शन या एक पुराना ब्राउज़र है, तो वे अभी भी इस बात का अंदाजा लगा सकते हैं कि आपके पृष्ठ पर क्या होना चाहिए।
14।
आदेशित सूची टैग आपको एक आदेशित सूची बनाने देता है। सामान्य तौर पर, इसका मतलब है कि आपको एक क्रमांकित सूची मिल जाएगी। सूची में प्रत्येक आइटम को एक सूची आइटम टैग की आवश्यकता है (
- पहली बात
- दूसरी बात
- तीसरी बात
नतीजा:
- पहली बात
- दूसरी बात
- तीसरी बात
HTML5 में, आप उपयोग कर सकते हैं
- संख्याओं के क्रम को उलटने के लिए। और आप प्रारंभ विशेषता के साथ शुरुआती मूल्य निर्धारित कर सकते हैं।
- पहला आइटम
- दूसरी वस्तु
- तीसरी वस्तु
- पहला आइटम
- दूसरी वस्तु
- तीसरी वस्तु
"प्रकार" विशेषता आपको ब्राउज़र को बताती है कि सूची आइटम के लिए किस प्रकार के प्रतीक का उपयोग करना है। इसे "1, " ए, "ए", "ए", "आई", या "आई, " सेट किया जा सकता है, इस तरह से संकेतित प्रतीक के साथ प्रदर्शित करने के लिए सूची सेट करें:
15।
अनियोजित सूची अपने आदेशित समकक्ष की तुलना में बहुत सरल है। यह केवल एक बुलेटेड सूची है।
नतीजा:
अव्यवस्थित सूचियों में भी "प्रकार" विशेषताएँ होती हैं, और आप इसे "डिस्क, " "सर्कल, " या "वर्ग" पर सेट कर सकते हैं।
16।
| 1 कॉलम | दूसरा स्तंभ |
|---|---|
| पंक्ति 1, कॉलम 1 | पंक्ति 1, कॉलम 2 | पंक्ति 2, कॉलम 1 | पंक्ति 2, स्तंभ 2 |
तालिका की प्रत्येक पंक्ति एक में संलग्न है
नतीजा:
| 1 कॉलम | दूसरा स्तंभ |
|---|---|
| पंक्ति 1, कॉलम 1 | पंक्ति 1, कॉलम 2 |
| पंक्ति 2, कॉलम 1 | पंक्ति 2, स्तंभ 2 |
17।
जब आप किसी अन्य वेबसाइट या व्यक्ति को उद्धृत कर रहे हों और आप अपने बाकी दस्तावेज़ से अलग उद्धरण सेट करना चाहते हों, तो ब्लॉकचॉट टैग का उपयोग करें। ब्लॉकचॉट टैग खोलने और बंद करने में आपको केवल उद्धरण की आवश्यकता होती है:
जिस वेब पर मैंने इसकी परिकल्पना की थी, हमने उसे अभी तक नहीं देखा है। भविष्य अभी भी अतीत की तुलना में बहुत बड़ा है।
नतीजा:
जिस वेब पर मैंने इसकी परिकल्पना की थी, हमने उसे अभी तक नहीं देखा है। भविष्य अभी भी अतीत की तुलना में बहुत बड़ा है।
आपके द्वारा उपयोग किए जाने वाले सटीक स्वरूपण आपके द्वारा उपयोग किए जा रहे ब्राउज़र या आपकी साइट के CSS पर निर्भर हो सकते हैं। लेकिन टैग वही रहता है।
जाओ फोर्थ और एचटीएमएल
इन 17 एचटीएमएल उदाहरणों (और गिनती) के साथ आपको एक सरल वेबसाइट बनाने में सक्षम होना चाहिए 5 नि: शुल्क HTML टेम्प्लेट आसानी से क्विक वेबसाइट्स बनाने के लिए किसी भी HTML कौशल नहीं है। अधिक पढ़ें । यह देखने के लिए कि उन सभी को एक साथ कैसे रखा जाए, आप हमारे नमूना HTML पृष्ठ को डाउनलोड कर सकते हैं। यह देखने के लिए अपने ब्राउज़र में खोलें कि यह सब एक साथ कैसे आता है, या एक पाठ संपादक में यह देखने के लिए कि कोड कैसे काम करता है।
HTML में अधिक काटने वाले पाठों के लिए, कोडिंग के लिए इन माइक्रोलर्निंग ऐप को आज़माना सीखें? अपने खाली समय में 5 बिट-साइज़ कोडिंग ऐप्स आज़माएं, मूल कोडिंग सीखना चाहते हैं? अपने खाली समय में 5 बिट-साइज़ कोडिंग ऐप्स आज़माएं, बुनियादी कोडिंग सीखना चाहते हैं, लेकिन बहुत कम समय है? ये काटने के आकार के कोडिंग ऐप आपके व्यस्त दिन के कुछ ही मिनट लगेंगे। अधिक पढ़ें ।
इसके बारे में अधिक जानें: कोडिंग ट्यूटोरियल, HTML, वेब डेवलपमेंट, वर्डप्रेस।
