HTML Website Create kare
किसी भी तरह की वेबसाइट को हाइपरटेक्सट मार्कअप लैंग्वेज यानी HTML की मदद से तैयार किया जा सकता है. स्क्रिप्ट आपके ऑपरेटिंग सिस्टम के अनुसार नोटपैड या टेक्स्ट डॉक्यूमेंट पर लिखा जा सकता है.
अपनी वेबसाइट बनाने की शुरुआत के लिए सबसे पहली और जरूरी चीज है HTML Tags और HTML Elements का प्रयोग. HTML टैग्स का इस्तेमाल आमतौर पर कंटेन्ट की यूनिट की जानकारी देने के लिए होता है . जबकि HTML एलीमेंट को वेबपेज के फॉरमैट टूल्स के लिए. कोडिंग करते वक्त HTML Attributes और वैल्यूज को प्लेसमेंट, हाईट आदि कंटेंट की जानकारी देने के लिए इस्तेमाल किया जाता है. यही नहीं, आप एक प्रभावशाली वेबसाइट बनाने के लिए कलर टैग, पिक्चर टैग और एचटीएमल Division Tags का प्रयोग कर सकते हैं.
अपनी वेबसाइट कैसे बनाएं
जब वेबसाइट बनाने की बात हो तो कई लोग अक्सर इसके लिए वेब डिजाइनर की मदद लेते हैं. हालांकि बिना कोई ताम-झाम के साधारण तरीके से एक बुनियादी वेबसाइट बनाई जा सकती है. इस लेख में हम इस बार यही बताएंगे कि ये कैसे किया जा सकता है.
HTML क्या है?
वेबसाइट बनाने के लिए सबसे पहले आपको HTML की बुनियादी चीजों को जानने-सीखने की जरूरत होगी. HTML Hyper Text Markup Language का संक्षिप्त रूप है. एचटीएमएल एक प्रोग्रामिंग लैंग्वेज (भाषा) है जिसका इस्तेमाल वर्ल्ड वाइड वेब यानी WWW पर हाइपरटेक्सट डॉक्यूमेंट बनाने के लिए किया जाता है. यह लैंग्वेज कोड्स और सिम्बल के सेट से मिलकर बना है जिससे आपके ब्राउजर पेज पर टेक्सट, ईमेज, फ्रेम और एनिमेशन तैयार होता है.
अपना वेबसाइट शुरू करने के दो तरीके हैं:
साधारण टेक्सट एडिटर में अपना कोड तैयार करना और उन्हें .htm file के रूप में सेव करना.
HTML जेनरेटर सॉफ्टवेयर का प्रयोग
आवश्यकताएं
यदि आप Windows का इस्तेमाल करते हैं तो नया Notepad डॉक्यूमेंट ओपन करते हुए शुरू करें. और यदि आप MAC चलाते हैं, तो नया SimpleText डॉक्यूमेंट ओपन करें. जो OSX यूजर हैं, वो TextEdit ओपन करें और आगे दिए गए बदलाव करें:
अपना Format मेनू ओपन करें और Plain Text को चुनें. Text Edit मेनू के तहत, Preferences विंडो चुनें और Ignore rich text commands in HTML files का विकल्प चुनें.
पहला उदाहरण
आपके पास खाली डॉक्यूमेंट हो, तो आगे दिए गए कमांड टाइप करते हुए स्टार्ट करें:
<html>
<head>
<title> ये आपके पेज का टाइटिल है</title>
</head>
<body>
यहां पर आपके सभी कंटेन्ट दिखाई देंगे
</body>
</html>
ध्यान दें:
अपने डॉक्यूमेंट को हमेशा .htm या html एक्सटेंशन के साथ सेव करें ताकि वे आपके वेब ब्राउजर में डिस्पले हों. (उदाहरण के लिए index.htm). अपने सोर्स डॉक्यूमेंट को एडिट करने के लिए, ब्राउजर विंडो में अपने टूलबार पर दिए गए View विकल्प को चुनें और Source को सलेक्ट करें. अपने डॉक्यूमेंट में किए गए हर बदलाव को सेव करना ना भूलें. ब्राउजर विंडो में डॉक्यूमेंट में जो मोडिफिकेशन किए गए हैं उन्हें देखने के लिए F5 की को दबाते हुए रिफ्रेश करें.
HTML टैग्स
HTML टैग वो मार्कअप होता है जो HTML डॉक्यूमेंट में जोड़ा जाता है. यह कंटेन्ट के बारे में अधिक जानकारी देने के लिए होता है. HTML tag हमेशा ब्रैकेट के बीच में होता है और इसमें एक क्लोजिंग टैग होना जरूरी होता है. (जैसे कि, <html> </html>).
HTML एलीमेंट
एलीमेंट वैसे मार्कअप टैग होते हैं जो वेबपेज के कुछ हिस्से या सेक्शन को फॉरमैट करने के लिए इस्तेमाल किए जाते हैं. HTML element का एक उदाहरण टैग है. इसका प्रयोग ब्राउजर में टेक्सट को डिस्पले करने में किया जाता है.
<html> आमतौर पर आपके ब्राउजर को ये बताता है कि ये फाइल HTML-कोडेड डेटा से बनी है. </html> का इस्तेमाल आपके डॉक्यूमेंट के एकदम आखिर में किया जाता है. ये आपके ब्राउजर को बताता है कि HTML कंटेन्ट यहां खत्म हो रहा है.
<head> में डॉक्यूमेंट का पहला हिस्सा होता है. ये आपके ब्राउजर पेज का टाइटल है. इसमें भी वैसे कमांड रह सकते हैं जो आपके ब्राउजर के डिस्पले को फॉरमैट करने के लिए प्रयोग किए जाते हैं (जैसे कि CSS calls). वहीं </head> का प्रयोग इस सेक्शन को खत्म करने के लिए किया जाता है. ये हिस्सा आपके ब्राउजर में डिस्पले नहीं होता है. <title> आपके वेबसाइट को लेबल करता है. इस प्रकार </title> का प्रयोग इस कमांड के अंत को बताने के लिए किया जाता है. इसी प्रकार <body> आपके ब्राउजर में डिस्पले होने वाले सभी कंटेन्ट को परिभाषित करता है.
कुछ बुनियादी HTML टैग को याद रखें
हेडिंग
हेडिंग या शीर्षक आपके वेब पेज में आने वाले कंटेन्ट के विषय की जानकारी देते हैं. HTML में उनका साइज अलग अलग हो सकता है, जैसे कि <h1> से <h6> तक. याद रखें कि <h1> सबसे लंबे-बड़े हेडिंग को इंगित करता है जबकि <h6> सबसे छोटे हेडिंग को. इसके अलावा, हेडिंग में ओपनिंग टैग <h2>और क्लोजिंग टैग </h2> भी होता है.
<h1> HTML के बारे में सबकुछ </h1>
पैराग्राफ
पैराग्राफ आपके वेब पेज में टेक्सट ब्लॉक्स को अलग करता है. HTML में उन्हें <p> टैग से परिभाषित किया जाता है. पैराग्राफ में एक ओपनिंग टैग <p> और क्लोजिंग टैग </p> होता है.
<p>इस सेक्शन को HTML टैग के रूप में परिभाषित किया जाता है</p>
लाइन ब्रेक
HTML में, लाइन ब्रेक DO NOT के लिए क्लोजिंग टैग की जरूरत होती है. इसलिए, उन्हें बस <br /> टैग के रूप में परिभाषित किया जाता है.
<br />इस सेक्शन में HTML टैग को परिभाषित किया गया है
कमेंट्स
डिजाइनर वेबपेज पर अलग अलग सेक्शन को लोकेट करने के लिए HTML पेज में इन्सर्ट करता है. इन्हें <!--- --> टैग से परिभाषित किया जाता है. ब्राउजर में कमेंट टैग डिस्पले नहीं होते, और इसलिए ये वेबपेज के फॉरमैट को बिना प्रभावित किए डॉक्यूमेंट में कहीं भी इस्तेमाल किए जाते हैं.
<!---यहां से कंटेन्ट शुरू --> <!--- यहां कंटेन्ट खत्म-->
दूसरा उदाहरण
<!---वेबपेज यहां से शुरू होता है -->
<html>
<head>
<title> HTML के बारे में सबकुछ</title>
</head>
<!---कंटेन्ट यहां से शुरू -->
<body>
<h1> HTML क्या है?</h1>
<p> HTML HyperText Markup Language के लिए संक्षिप्त रूप है </p>
</body>
<!---कंटेन्ट यहां खत्म होता है -->
</html>
<!---वेबपेज यहां खत्म होता है -->
HTML एट्रीब्यूट्स और वेल्यूज
HTML एट्रीब्यूट्स वैसी जानकारियां होती हैं जो एलीमेंट में जोड़ी गई होती हैं और HTML एलीमेंट में खास विशेषताओं को शामिल करने के लिए प्रयोग की जाती हैं. HTML एट्रीब्यूट्स हमेशा साथ में और एक वैल्यू (उदाहरण के लिए नाम="value") के साथ लिखा जाता है. इसके अलावा ये HTML एलीमेंट के स्टार्ट टैग के साथ रखे जाते हैं.
उदाहरण के लिए, यदि आप चाहते हैं कि हेडिंग बाई डिफॉल्ट बायीं ओर डिस्पले होने की बजाय आपके पेज के सेन्टर में हो तो आप टैग में अलाइन एट्रीब्यट को ऐड कर सकते हैं:
<h1 align ="सेन्टर">
यहां ये वैल्यू एट्रीब्यूट के बारे में खास जानकारी देगा. वैल्यू को आमतौर पर एक इक्वल साइन के साथ लिखा जाता है और यह कोटेशन मार्क से बंद होता है. (उदाहरण के लिए नाम="वैल्यू")
तीसरा उदाहरण
<!---वेबपेज यहां से शुरू होता है -->
<html>
<head>
<title> HTML के बारे में सबकुछ</title>
</head>
<!---कंटेन्ट यहां से शुरू होता है -->
<body>
<h1 align="center"> HTML क्या है?</h1>
<p> HTML HyperText Markup Language के लिए संक्षिप्त रूप है </p>
</body>
<!---कंटेन्ट यहां खत्म होता है -->
</html>
<!---वेबपेज यहां खत्म होता है -->
कलर टैग्स
कलर टैग की मदद से आप ब्राउजर विंडो में डिस्पले किए गए टेक्सट को बदल सकते हैं. उदाहरण के लिए <BODY TEXT="blue"> बताता है कि यदि आप टेक्सट का कलर बदलना चाहते हैं तो ऐसा कैसे कर सकते हैं.
HTML में, हेक्साडेसिमल कोड का प्रयोग करते हुए खास कलर या रंग को हासिल करने के लिए कलर कोड का इस्तेमाल भी कर सकते हैं. हेक्साडेसीमल ट्रिपलेट लाल, हरा और नीला (आरजीबी) के अनुसार होता है. इस तरह, हेक्साडेसिमल में कलर टैग कुछ इस तरह दिखेगा <BODY TEXT="#000258">. आप निम्नलिखित लिंक का अनुसरण करते हुए नाम और कलर कोड पा सकते हैं.
आप अपने वेबसाइट के बैकग्राउंड का कलर या रंग भी कलर टैग की मदद से बदल सकते हैं. इसके लिए आपको BGCOLOR एट्रीब्यूट ऐड करना होगा. इस तरह, <BODY BGCOLOR="#000258"> अपने बैकग्राउंड का रंग बाई डिफॉल्ट सफेद से आपकी पसंद के रंग से बदल देगा.
चौथा उदाहरण
<!---वेबपेज यहां से शुरू होता है -->
<html>
<head>
<title> HTML के बारे में सबकुछ</title>
</head>
<!---कंटेन्ट यहां से शुरू होता है -->
<body bgcolor= "#808080">
<body text="#ffffff">.
<h1 align="center"> HTML क्या है?</h1>
<p> HTML HyperText Markup Language का संक्षिप्त रूप है </p>
</body>
<!--- कंटेन्ट यहां खत्म होता है -->
</html>
<!---वेबपेज यहां खत्म होता है -->
ध्यान दें:
ये सलाह दी जाती है कि गुलाबी या पीले जैसे चटक रंगों का इस्तेमाल ना करें क्योंकि ये रंग आपको आंखों में चुभ सकते हैं. यही नहीं, अधिकतम 4 हल्के मेल खाते कलर टोन का प्रयोग करने की कोशिश करें जो आपकी वेबसाइट के मिजाज से मेल खाते हों और सुकून का एहसास देते हों. ये भी ध्यान रखें कि फॉरमल वेबसाइट के लिए ब्लू बैकग्राउंड पर गुलाबी टेक्सट जैसे अजीब लगने वाले कलर मैच का प्रयोग न करें क्योंकि ये भद्दा लग सकता है.
टेक्सट फॉरमैटिंग
टेक्सट फॉरमैटिंग टैग से ब्राउजर विंडो में आपके टेक्सट डिस्पले में बदलाव लाया जा सकता है. उदाहरण के लिए, किसी टेक्सट को बोल्ड करने के लिए आप <b> टैग का प्रयोग कर सकते हैं. (जैसे कि <b> इस टेक्सट में बोल्ड फॉन्ट होंगे </b>). आगे कुछ आम फॉरमैटिंग टैग की सूची दी गई है जिनका इस्तेमाल आप अपने टेक्सट डिस्पले को बदलने के लिए कर सकते हैं:
1. Bold Tag
<b>ये टेक्सट बोल्ड में होगा</b>
2. Italic Tag
<i>ये टेक्सट इटैलिक में होगा</i>
3. Underline Tag
<u>ये टेक्सट अंडरलाइन किया हुआ होगा</u>
4. Emphasize Tag
<em>ये आपके टेक्सट को एम्फसाइड करेगा</em>
5. Strong Tag
<strong>ये टेक्सट स्ट्रॉंग होगा</strong>
6. Big Tag
<big> ये बिग टेक्सट को परिभाषित करेगा</big>
7. Small Tag
<small> ये छोटे टेक्सट को परिभाषित करेगा</small>
8. Subscript Tag
<sub>ये टेक्सट सब्सक्रिप्टेड होगा</sub>
9. Superscript Tag
<sup>ये टेक्सट सुपरस्क्रिप्टेड होगा</sup>
10. Center Tag
<center> ये टेक्सट सेंटर में होगा</center>
11. Left Tag
<left>ये टेक्सट स्क्रीन के बायीं ओर डिस्पले होगा</left>
12. Right Tag
<right>ये टेक्सट आपकी स्क्रीन के दाहिनी ओर डिस्पले होगा</right>
13. Unordered List Tag
<ul>
<li>ये एक अनऑर्डर्ड लिस्ट है</li>
<li>ये एक अनऑर्डर्ड लिस्ट है</li>
</ul>
14. Ordered List Tag
<ol>
<li>ये मेरी सूची में नंबर 1 है</li>
<li>ये मेरी सूची में नंबर 2 है</li>
</ol>
ध्यान रखें:
1. इन टैग्स को कंबाइन्ड यानी जोड़ा भी जा सकता है. यदि आप अपने टेक्सट को अंडरलाइन और बोल्ड करना चाहते हैं तो <u><b> का इस्तेमाल करें. ये टेक्सट बोल्ड होगा और underlined</b></u> इससे टेक्सट अंडरलाइन होगा.
2. हालांकि, सबसे पहले टैग को हमेशा बंद करें जिसे आपने सबसे अंत में ओपन किया हो. उपर के उदाहरणों में, <u> को सबसे पहले FIRST ओपन किया गया है, <b> टैग से पहले, लेकिन सबसे आखिर में LAST बंद किया गया.
पांचवां उदाहरण
<!---वेबपेज यहां से शुरू होता है -->
<html>
<head>
<title>HTML के बारे में सबकुछ</title>
</head>
<!---कंटेन्ट यहां से शुरू होता है -->
<body bgcolor= "#808080">
<body text="#ffffff">.
<h1 align="center"> HTML क्या होता है?</h1>
<p><b>HTML HyperText Markup Language का संक्षिप्त रूप है </b></p>
<i>ये भाषा कोड के सेट और सिम्बॉल से बना होता है और इससे निम्नलिखित चीजें जेनरेट होंगी:</i>
<ul>
<li> टेक्सट, </li>
<li> ईमेजेज,</li>
<li> साउंड्स,</li>
<li> फ्रेम्स </li>
<li> आपके ब्राउजर पेज पर एनीमेशन. </li>
</ul>
<br />
आप निम्नलिखित दो तरीकों में से किसी एक से अपनी वेबसाइट की शुरुआत कर सकते:
<ol>
<li><u> साधारण टेक्सट एडिटर में आपका अपना कोड तैयार करना और उन्हें.htm file के रूप में सेव करना या </u></li>
<li><u> HTML जेनरेटर सॉफ्टवेयर का प्रयोग करेंgenerator software.</u></li>
</ol>
</body>
<!--- कंटेन्ट यहां खत्म होता है -->
</html>
<!---वेबपेज यहां खत्म होता है -->
==HTML डिवीजन टैग्स==¬¬
हॉरिजेन्टल नियम
हॉरिजेन्टल नियम आपके वेबपेज को डिवाइड या सबडिवाइड करने के काम आता है. <hr> टैग का प्रयोग हॉरिजेन्टल लाइन बनाने के लिए किया जाता है और इनके साइज, कलर या विड्थ (चौड़ाई) को बदलते हुए अलग अलग तरह की लाइन बनाने के लिए इन्हें बदला जा सकता है.
उदाहरण के लिए <hr width="75%" साइज="2" align="center"> या<hr कलर="#ffffff">
सॉलिड लाइन
<hr noshade> टैग का प्रयोग सॉलिड लाइन बनाने के लिए किया जाता है. यह हॉरिजेन्टल रूल टैग से जरा सा बदलता है क्योंकि यह <hr> टैग की मदद से बनाए गए 3D कटआउट के बिना लाइन का निर्माण करता है.
छठा उदाहरण
<!---वेबपेज यहां से शुरू होता है -->
<html>
<head>
<title> HTML के बारे में सबकुछ</title>
</head>
<!--- कंटेन्ट यहां से शुरू होता है -->
<body bgcolor= "#808080">
<body text="#ffffff">.
<h1 align="center"> HTML क्या है?</h1>
<hr विड्थ="100%" साइज="2" align="center" कलर="#ffffff">
<p><b>HTML HyperText Markup Language के लिए संक्षिप्त रूप है </b></p>
<i>ये भाषा कोड सेट और सिम्बॉल से बनी है जो तैयार करेगी:</i>
<ul>
<li> टेक्सट, </li>
<li> ईमेजेज,</li>
<li> साउंड्स,</li>
<li> फ्रेम्स </li>
<li> आपके ब्राउजर पेज पर एनीमेशन. </li>
</ul>
<br />
<hr noshade साइड="5">
आप निम्नलिखित दो तरीकों में से किसी एक से अपनी वेबसाइट की शुरुआत कर सकते:
<ol>
<li><u> साधारण टेक्सट एडिटर में आपका अपना कोड तैयार करना और उन्हें.htm file के रूप में सेव करना या </u></li>
<li><u> HTML जेनरेटर सॉफ्टवेयर का प्रयोग करेंgenerator software.</u></li>
</ol>
</body>
<!--- कंटेन्ट यहां खत्म होता है -->
</html>
<!---वेबपेज यहां खत्म होता है -->
ईमेज टैग्स
HTML डॉक्यूमेंट की मदद से आप ईमेज टैग का इस्तेमाल करते हुए ईमेजेज को इन्सर्ट कर सकते हैं. इसके लिए या तो आप ऑनलाइन URL से ईमेज को ब्राउज कर सकते हैं या फिर अपने खुद के कंप्यूटर से ब्राउज कर सकते हैं. <img src> एक ईमेज टैग है. इसका मतलब "image source" है; मतलब, ईमेज पाथ को एट्रीब्यूट के बाद परिभाषित किया जाना चाहिए. यदि ईमेज आपके सोर्स डॉक्यूमेंट के रूप में एक ही फोल्डर में पाए जाते हैं तो, आपको फिर पूरी पाथ डायरेक्ट्री डालने की कोई जरूरत नहीं है.
उदाहरण के लिए <img src = "https://www.theodora.com/gif4/html_colors.gif">
या <img src = "colorcode.gif"> or <img src = "colorcode.jpg">
एलाइनमेंट टैग
एक बार और, आप ईमेज को आपके ब्राउजर के या तो सेंटर या दाहिनी ओर या बांयी ओर डिस्पले करने के लिए ALIGN एट्रीब्यूट का इस्तेमाल कर सकते हैं.
उदाहरण 1
<img src = "https://www.theodora.com/gif4/html_colors.gif" align="center">
ध्यान दें: हालांकि ऐसा भी संभव है कि आपका ब्राउजर इस टैग को सपोर्ट ना करे. ऐसे में आप ब्राउजर में अपने ईमेज को सेन्टर करने के लिए ईमेज टैग के ठीक पहले <center> टैग का इस्तेमाल किया जा सकता है.
उदाहरण 2
<center><img src = "https://www.theodora.com/gif4/html_colors.gif"></center>
ईमेज साइज
आपकी डिस्पले की गई ईमेज के साइज में बदलाव लाया जा सकता है. इसके लिए WIDTH और HEIGHT एट्रीब्यूट की इस्तेमाल करना होगा. आप अपने ईमेज को आकार देने के लिए या तो प्रतिशत या पिक्सल का प्रयोग कर सकते हैं.
उदाहरण 1
<img src = "https://www.theodora.com/gif4/html_colors.gif "width="50%" height="50%">
उदाहरण 2
<img src = "https://www.theodora.com/gif4/html_colors.gif "width="200px" height="600px">
ईमेज बॉर्डर
यदि आप अपने ईमेज में एक बॉर्डर इन्सर्ट करना चाहते हैं तो ऐसा करने के लिए BORDER एट्रीब्यूट का प्रयोग कीजिए.
उदाहरण के लिए.
<img src = "https://www.theodora.com/gif4/html_colors.gif " border="5">
रनअराउंड स्पेस
ईमज के आस पास जो स्पेस होता है उसे रनअराउंड स्पेस कहते हैं. जब आपको अपने पिक्चर के आस पास टेक्स्ट चाहिए होता है तब ये टैग बहुत काम का साबित होता है. It is defined using the टॉप के लिए VSPACE ए्रट्रीब्यूट का इस्तेमल करते हुए इसे परिभाषित किया जाता है और बाएं और दाहिने किनारे के लिए HSPACE एट्रीब्यूट को परिभाषित किया गया है.
उदाहरण के लिए
<img src = "https://www.theodora.com/gif4/html_colors.gif " vspace="5" hspace="5>
Alt Attribute
जब माउस पूरे स्क्रीन पर घुमाया जाता है तब Alt attribute डिस्पले किए गए ईमेज को लेबल करता है. यदि किसी कारण ब्राउजर ईमेज को डिस्पले नहीं कर पाता, तो यूजर इस बात का पता लगा सकता है कि इस विशेष जगह पर कौन सा ईमेज डिस्पले किया हुआ है.
<img src = "https://www.theodora.com/gif4/html_colors.gif " alt="hexadecimal color codes">
सातवां उदाहरण
<!---वेबपेज यहां से शुरू होता है -->
<html>
<head>
<title> HTML के बारे में सबकुछ</title>
</head>
<!--- कंटेन्ट यहां से शुरू होता है -->
<body bgcolor= "#808080">
<body text="#ffffff">.
<h1 align="center"> HTML क्या है?</h1>
<hr विड्थ="100%" साइज="2" align="center" कलर="#ffffff">
<p><b>HTML HyperText Markup Language के लिए संक्षिप्त रूप है </b></p>
<i>ये भाषा कोड सेट और सिम्बॉल से बनी है जो तैयार करेगी:</i>
<ul>
<li> टेक्सट, </li>
<li> ईमेजेज,</li>
<li> साउंड्स,</li>
<li> फ्रेम्स </li>
<li> आपके ब्राउजर पेज पर एनीमेशन. </li>
</ul>
<br />
<hr noshade साइड="5">
आप निम्नलिखित दो तरीकों में से किसी एक से अपनी वेबसाइट की शुरुआत कर सकते हैं:
<ol>
<li><u> साधारण टेक्सट एडिटर में आपका अपना कोड तैयार करना और उन्हें .htm file के रूप में सेव करना या </u></li>
<li><u> HTML जेनरेटर सॉफ्टवेयर का प्रयोग.</u></li>
</ol>
<hr noshade आकार="5">
<h2> कलर कोड्स</h2>
<p>आप अपने वेबसाइट के ऐटमॉस्फियर को क्रिएट करने के लिए Theodora की ओर से मुहैया किए गए हेक्साडेसिमल कलर कोड का इस्तेमाल कर सकते हैं.</p>
<img src = https://www.theodora.com/gif4/html_colors.gif vspace="10" hspace="10" alt="हेक्साडेसिमल कलर कोड्स">
यहां vspace और hspace एट्रीब्यूट के कुछ उदाहरण दिए गए हैं.
</body>
<!---कंटेन्ट यहां से शुरू होता है -->
</html>
<!---वेबपेज यहां खत्म हो जाता है -->
लिंकिंग टैग्स
HTMLमें, यदि आपको पेज के एक सेक्शन से दूसरे सेक्शन या एक पेज से दूसरे पेज पर जाना हो तो लिंकिंग टैग्स का प्रयोग किया जाता है. यदि आप इनका इस्तेमाल पेज के एक सेक्शन से जंप करना हो या आपके अपने वेबसाइट पेज से दूसरे पर जंप करना या जाना हो तो इन्हें इंंटरनल यानी भीतिरी लिंक भी कहा जाता है. और यदि आपको किसी दूसरे वेबसाइट का कोई नया ब्राउजर विंडो खोलना हो तो इसे एक्सटरनल लिंक कहते हैं. लिंकिंग टैग का सबसे ब़ड़ा फायदा ये है कि इससे आप स्क्रॉलिंग वेबपेज को क्रिएट करने की जगह एक डायनामिक वेबसाइट बना सकते हैं.
एक्सटरनल लिंक
<a href= "http://www.webaddress.com/">वेब ऐड्रेस लिंक<a/> आपके वेबपेज में हाइपरलिंक के रूप में "Web Address Link" को डिस्पले करेगा. और जब यूजर टेक्सट पर क्लिक करेंगे तो ये www.webaddress.com वेबपेज लिंक खोलेगा.
इंटरनल लिंक
इंटरनल लिंक को इन्सर्ट करने के दो खास तरीके होते हैं:
1. एक ही बेबसाइट पर मौजूदा पेज से किसी दूसरे पेज पर जंप करना.
2. एक ही पेज पर एक सेक्शन से दूसरे सेक्शन पर जंप करना.
एक सेक्शन से दूसरे सेक्शन पर जंप आप तभी कर सकते हैं जब आप पहले सेक्शन को एक नाम दें ताकि जब इसकी जरूरत हो ते टैग उसे लोकेट कर सके. उदाहरण के लिए, HTML से जुड़े लिंक को वेबपेज के ऊपरी सेक्शन में, "HTML Links" हेडिंग के ठीक ऊपर इन्सर्ट करना होगा. टैग <a name="links"> को यहां इनसर्ट कीजिए. लिंक का जो वैल्यू होगा होगा वो उस सेक्शन को बताएगा जिसे लोकेट करना है; यदि आपके वेबपेज का सेक्शन कैट से जुड़ा है तो <a name="cats"> टैग को कैट के लिए दिए गए हेडिंग के ठीक ऊपर इन्सर्ट कीजिए.
इस प्रक्रिया को खत्म करने के बाद, आपको उस लिंक को भी इन्सर्ट करना होगा जिससे आप जंप करना चाहते हैं. इस उदाहरण में, यदि आप पेज के टॉप से पेज के निचले हिस्से में पाए गए "HTML Links" पर जंप करना चाहते हैं तो <a href="#links">Linking Tags</a> को इन्सर्ट कीजिए. इसके बाद हाइपरलिंक्ड टैक्सट "Linking Tags" सामने दिखेगा. और जब यूजर इसे क्लिक करेंगे , वे मौजूदा लोकेशन से बताए गए सेक्शन में जंप कर जाएंगे.
आठवां उदाहरण
<!---वेबपेज यहां से शुरू होता है -->
<html>
<head>
<title> HTML के बारे में सबकुछ</title>
</head>
<!--- कंटेन्ट यहां से शुरू होता है -->
<body bgcolor= "#808080">
<body text="#ffffff">.
<a href="#color">Color Codes</a>
<br />
<a href="#links">Linking Tags</a>
<h1 align="center"> HTML क्या है?</h1>
<hr विड्थ="100%" साइज="2" align="center" कलर="#ffffff">
<p><b>HTML HyperText Markup Language के लिए संक्षिप्त रूप है </b></p>
<i>ये भाषा कोड सेट और सिम्बॉल से बनी है जो तैयार करेगी:</i>
<ul>
<li> टेक्सट, </li>
<li> ईमेजेज,</li>
<li> साउंड्स,</li>
<li> फ्रेम्स </li>
<li> आपके ब्राउजर पेज पर एनीमेशन. </li>
</ul>
<br />
<hr noshade साइड="5">
आप निम्नलिखित दो तरीकों में से किसी एक से अपनी वेबसाइट की शुरुआत कर सकते हैं:
<ol>
<li><u> साधारण टेक्सट एडिटर में आपका अपना कोड तैयार करना और उन्हें .htm file के रूप में सेव करना या </u></li>
<li><u> HTML जेनरेटर सॉफ्टवेयर का प्रयोग.</u></li>
</ol>
<hr noshade size="5">
<h2>Color Codes</h2>
<a name="color">
<p>You can use hexadecimal color codes provided by Theodora to create your own website atmosphere</p>
<img src = https://www.theodora.com/gif4/html_colors.gif vspace="10" hspace="10" alt="Hexadecimal Color Codes">
This is the example that you have with the vspace and hspace attribute
<br />You can find a useful to visit Microsoft's website by clicking on this link<a href= "https://www.microsoft.com/fr-fr/"> Microsoft </a>
<hr noshade size="5">
<a name="links">
<h2>Linking Tags</h2>
<br /> This section will discuss about the importance of Linking tags on your website.
</body>
<!---Content ends here -->
</html>
<!---Webpage ends here -->
ध्यान दें:
ये केवल इस बात का उदाहरण हैं कि आप कैसे लिंकिंग टैग का फायदा उठा सकते हैं. आप अपनी वेबसाइट को यूजर्स के लिए अधिक फ्रेंडली और आकर्षक बनाने के लिए बेशक उनके प्लेसमेंट को भी बदल सकते हैं.
टारगेट विंडो
टारगेट विंडो लिंक्ड पेज को किसी दूसरे ब्राउजर विंडो में लोड करता है. ताकि यूजर आपकी वेबसाइट के करेंट पेज पर रह सके और दूसरे ब्राउजर में हाइपरलिंक किए गए ऐड्रेस को देख सके.
<a href= "http://www.webaddress.com/" target= "_blank">Web Address Link<a/>
टेबल टैग्स
आपके वेबसाइट में टेबल डालना काफी फायदेमंद हो सकता है. आप सारी जानकारियों को व्यवस्थित तरीके से देख सकते हैं. इससे आपको टेक्सट और ग्राफिक्स को अधिक सटीक रूप से संभालने में मदद मिलेगी.
जो ओपनिंग टैब है वो <table> बहुत उपयोगी है. यह आपके ब्राउजर को बताता है कि टेबल में जो पेज है वो यहां से शुरू होता है और यहां पर खत्म होतो है</table> टैग के साथ. आप अपने टेबल के आकार के अनुसार रंग, साइज और बॉर्डर को बदल सकते हैं.
टेबल का आकार <table width="0" height="0"> टैग की मदद से बदला जा सकता है. आप टेबल की साइज को बदलने के लिए या तो पिक्सल या प्रतिशत का उपयोग भी कर सकते हैं.
आप <table border ="0"> टैग का भी इस्तेमाल कर सकते हैं. उदाहरण के लिए आप इसकी मदद से अपने ब्राउजर में एक अदृश्य बॉर्डर बना सकते हैं.
<table cellpadding="0"> टैग की मदद से टेबल के बॉर्डर के भीतरी लाइन और टेक्सट के बीच स्पेस गैप बना सकते हैं.
<table cellspacing="0"> टैग का इस्तेमाल टेबल के बॉर्डर के भीतरी लाइन और बाहरी लाइन के बीच स्पेस गैप डालने के लिए किया जाता है.
एक टेबल स्तंभ यानी कॉलम और कतार यानी रो से बना होता है. एक सेल वो स्पेस है जहां आपके कंटेन्ट डाले जाएंगे. कॉलम टैग को <td> और </td> टैग के रूप में जाना जाता है. रो को <tr> और </tr> टैग के रूप में. सेल की चौड़ाई को बदलने के लिए आप <td width = "0"> टैग का उपयोग कर सकते हैं. साइज को या तो प्रतिशत या पिक्सेल के रूप में सेट किया जा सकता है.
आप अपने रो और कॉलम को जोड़ भी सकते हैं. इसके लिए आपको अपने टैग में ALIGN को ऐ करना होगा. इसलिए, किसी खास रो को जोड़ने के लिए, उदाहरण के लिए, <tr align="top"> टैग को इनसर्ट करना होगा और कॉलम को जोड़ने के लिए <td align="center"> को ऐड करना होगा.
अपने सेल को जोड़ने के लिए आप ऐट्रीब्यूट VALIGN. <td align="center" valign="top"> को ऐड कर सकते हैं. यह सेल को आपके पेज के ऊपरी सेन्टर में रखेगा.
कॉलम को फैलाने के लिए, आप <td colspan="1"> टैग का उपयोग कर सकते हैं. इससे आपको कॉलम की संख्या को सेट करने में मदद मिलेगी. सेल को भी फैलाया जा सकता है. ध्यान रखें क डिफॉल्ट वैल्यू 1 सेट किया गया है.
साथ ही, सेल को कई रो में फैलाने के लिए <td rowspan="0"> टैग का उपयोग करें.
नौवां उदाहरण
<!---वेबपेज यहां से शुरू होता है -->
<html>
<head>
<title>HTML के बारे में सब कुछ</title>
</head>
<!---कंटेन्ट यहां से शुरू होते हैं -->
<body bgcolor= "#808080">
<body text="#ffffff">
<a href="#color">कलर कोड्स</a>
<br />
<a href="#table">कलर टैग्स</a>
<h1 align="center"> HTML क्या है?</h1>
<!---आपका पहला टेबल यहां से शुरू होता है -->
<table border="1">
<td width="1000">
<h1 align="center"> HTML क्या है?</h1>
<hr विड्थ="100%" साइज="2" align="center" कलर="#ffffff">
<p><b>HTML HyperText Markup Language के लिए संक्षिप्त रूप है </b></p>
<i>ये भाषा कोड सेट और सिम्बॉल से बनी है जो तैयार करेगी:</i>
<ul>
<li> टेक्सट, </li>
<li> ईमेजेज,</li>
<li> साउंड्स,</li>
<li> फ्रेम्स </li>
<li> आपके ब्राउजर पेज पर एनीमेशन. </li>
</ul>
<br />
<hr noshade साइड="5">
आप निम्नलिखित दो तरीकों में से किसी एक से अपनी वेबसाइट की शुरुआत कर सकते हैं:
<ol>
<li><u> साधारण टेक्सट एडिटर में आपका अपना कोड तैयार करना और उन्हें .htm file के रूप में सेव करना या </u></li>
<li><u> HTML जेनरेटर सॉफ्टवेयर का प्रयोग.</u></li>
</ol>
</td>
</table>
<!---आपका पहला टेबल यहां खत्म होता है -->
<h2>कलर कोड्स</h2>
<!---आपका दूसरा टेबल यहां से शुरू होता है -->
<table border="0">
<td width="500">
<img src = https://www.theodora.com/gif4/html_colors.gif vspace="10" hspace="10" alt="Hexadecimal Color Codes">
<a name="color">
<td align="right" valign="top">
<p>आप हेक्साडेसिमल कलर कोड का प्रयोग कर सकते हैं जो आपके खुद के वेबसाइट का ऐटमॉसफियर तैयार करने के लिए प्रदान किया गया है. </p>कुछ और टेक्सट यहां ऐड किए जा सकते हैं. </p>कुछ और टेक्सट यहां ऐड किए जा सकते हैं. </p>कुछ और टेक्सट यहां ऐड किए जा सकते हैं. </p>कुछ और टेक्सट यहां ऐड किए जा सकते हैं. </p>कुछ और टेक्सट यहां ऐड किए जा सकते हैं. </p>
</td>
</td>
</table>
<!---आपका दूसरा टेबल यहां खत्म होता है -->
<a name="table">
<h2>टेबल टैग्स</h2>
ये हिस्सा आपको टेबल टैग्स के बारे में अतिरिक्त जानकारी देगा. <
p>
<!---आपका तीसरा टेबल यहां से शुरू होता है -->
<table border="2" bordercolor="#ffffff" cellpadding="1" cellspacing="2" width="70%" valign="middle" align="center">
<th width="100%" colspan="3" bgcolor="red">Heading</th><tr>
<td colspan="3" height="50" align="center">
ये कंटेन्ट का दूसरा हिस्सा है.
</td>
</tr>
<tr>
<td align="center" bgcolor="red"><i>पहला कॉलम</i></td><td align="center" bgcolor="red"><i>दूसरा कॉलम</i></td><td align="center" bgcolor="red"><i>तीसरा कॉलम</i></td></tr>
<tr>
<td rowspan="4" width="33%" align="center" bgcolor="red"> तीसरी पंक्ति में Cell Spanning (दूसरा और तीसरा मिला दिया गया)</td>
<td rowspan="3" width="33%" align="center" bgcolor="red"> दूसरी पंक्ति में Cell Spanning (पहला और दूसरा सेल मिला दिया गया)</td>
<td width="33%" align="center" bgcolor="लाल">पहला सेल</td>
</tr>
<td width="33%" align="center" bgcolor="लाल">दूसरा सेल</td>
</tr>
<tr>
<td width="33%" align="center" bgcolor="लाल">3rd Cell</td>
</tr>
<tr>
<td width="33%" align="center" bgcolor="लाल">तीसरा सेल</td><td width="33%" align="center" bgcolor="red"> चौथा सेल</td>
</tr>
</table>
<!---आपका तीसरा टेबल यहां खत्म होता है -->
</body>
<!---कंटेन्ट यहां खत्म होते हैं -->
</html>
<!---वेबपेज यहां खत्म होता है -->
HTML फ्रेम टैग्स
HTML फ्रेम की मदद से आप वेबपेज के भीतर अलग विंडो तैयार कर सकते हैं. ये बड़े ही उपयोगी होते हैं क्योंकि इससे आप वेबपेज में एक से अधिक डॉक्यूमेंट को डिस्पले कर सकते हैं.
इस फ्रेम का प्रयोग करने के लिए आपके पास कम से कम दो अलग अलग .htm files होना चाहिए. इसमें से एक का नाम index.htm होगा. index.htm फाइल वहां होगा जहां सभी विंडो डिस्पले किए जाएंगे. फ्रेम टैग को <frame> के रूप में परिभाषित किया गया है और <frameset> टैग का उपयोग फ्रेम के उस सेट को परिभाषित करने में होता है जिसका प्रयोग index.htm file में किया जाता है.
दसवां उदाहरण
<html>
<head>
<title> फ्रेम टैग को जांचें</title>
</head>
<frameset rows="100,*">
<frame name= "top" src="banner.htm">
<frameset cols="100,*,100">
<frame name="left" src="menu.htm">
<frame name="middle" src="content.htm">
<frame name="right" src="right.htm">
</frameset>
</html>
<frameset rows> आपके ब्राउजर में डिस्पले होने वाली कतार (रो) का साइज तय करेगा.
<frameset cols> आपके ब्राउजर में डिस्पले होने वाली पंक्ति (कॉलम) का साइज तय करेगा.
The <frame name> टैग फ्रेम का नाम रखेगा और मुख्य विंडो से जोड़ने में इस्तेमाल किया जाएगा.
<frameset frameborder> टैग का प्रयोग आपको प्रेम के बॉर्डर को सेट करने में किया जाएगा. इसे 0 पर सेट करने से ये सुनिश्चित होगा कि ये सभी ब्राउजर्स के अनुरुप है.
<frameset framespacing> सबसे नजदीक के फ्रेम के बीच कितनी जगह होगी ये तय करेगा.
<frame marginwidth> फ्रेम के दोनों तरफ जगह की चौड़ाई तय करेगा. साइज पिक्सल में तय होगा.
<frame marginheight> टॉप और बॉटम मार्जिन का साइज पिक्सल में तय करेगा.
<frame scrolling> टैग आपके फ्रेम पर वर्टिकल या हॉरिजेन्टल स्क्रॉलबार को सक्रिय करेगा. इसका वैल्यू या तो "यस", "नो" या "ऑटो" के रूप में सेट होगा.
WYSIWYG सॉफ्टवेयर
एक ऐसा सॉफ्टवेयर प्रोग्राम है जिसे WYSIWYG (वॉट यू सी इज वॉट यू गेट) कहते हैं. ये आपके लिए एनकोड करता है. हालांकि ये आपको अनचाहे सरप्राइज से बचने के लिए एचटीएमएल के न्यूनतम कॉन्सेप्ट को सीखने से रोक नहीं सकता है! इस सॉफ्टवेयर की मदद से आप टेक्सट और ईमेज को डालते हैं और फिर सॉफ्टवेयर साथ ही साथ तदनुरुप एचटीएमएल कोड बनाता है. यह एनिमेशन और स्क्रिप्ट को शामिल किए जाने को भी आसान बनाता है. उदाहरण के लिए:
Dreamweaver, फ्री तो नहीं लेकिन बहुत कॉम्प्रिहेंसिव है और अच्छी तरह से तैयार किए गए ट्यूटोरियल के साथ इसका प्रयोग आसान है.
GoLive फोटोशॉप एडिटर
फ्री WYSIWYG के लिए, हम जिक्र कर सकते हैं:
http://bluegriffon.org/pages/DownloadBlueGriffon
Photo: © Arian Darvishii - Unsplash.com
यह भी पढ़ें
- Html script for website
- Webpage mein form ka upyog kaise kiya jata hai - सर्वश्रेष्ठ जवाब
- Create free website with html code - सर्वश्रेष्ठ जवाब
- Volte activation code for vi - कैसे करें -इंटरनेट
- Ignou student app for iphone - डाउनलोड करें - इंटरनेट
- How to build website on godaddy - कैसे करें -इंटरनेट
- Sbi application for statement - कैसे करें -प्रोफेशनल
- Apply online for bajaj finserv emi card - कैसे करें -इंटरनेट
CCM (in.ccm.net) पर उपलब्ध यह डॉक्युमेंट "अपनी Website Create कैसे करें" क्रिएटिव कॉमन लाइसेंस के तहत उपलब्ध कराया गया है. जैसा कि इस नोट में साफ जाहिर है, आप इस पन्ने को लाइसेंस के तहत दी गई शर्तों के मुताबिक संशोधित और कॉपी कर सकते हैं.