वेबसाइट, ब्लॉग, वेब पेज - हमारे समय में पहले से ही परिचित अवधारणाएं हैं। इंटरनेट के विकास के साथ, वेब पेजों की मेजबानी के लिए साइटें अविश्वसनीय रूप से लोकप्रिय हो गई हैं, और यह आश्चर्य की बात नहीं है: कुछ लोगों के लिए, अपनी वेबसाइट रखना एक आवश्यकता है, दूसरों के लिए यह एक सुखद मनोरंजन है। पहले मामले में, हम आम तौर पर फर्मों, निगमों, निजी उद्यमियों के बारे में बात कर रहे हैं, जब वे मांग में किसी उत्पाद या सेवा का विज्ञापन करते हैं। दूसरा ब्लॉगर्स के बारे में है।
इसके अलावा, ऐसे इंटरनेट उपयोगकर्ता हैं जो केवल जानकारी खोजते हैं, ब्लॉग पढ़ते हैं, वीडियो देखते हैं आदि।
एक गुणवत्तापूर्ण वेबसाइट बनाने के लिए, कई विकल्प हैं। हम HTML के माध्यम से वेब प्रोग्रामिंग पर ध्यान देंगे।
एचटीएमएल क्या है
HTML का अर्थ हाइपर टेक्स्ट मार्क-अप लैंग्वेज है। अंग्रेजी से अनुवादित, इसका अर्थ है "हाइपरटेक्स्ट मार्कअप लैंग्वेज"।
दूसरे शब्दों में, HTML कोड का एक सेट है जिसके साथ आप साइट के मुख्य तत्व, उसका फ्रेम, जैसे बना सकते हैंशब्द वाक्यों से कैसे बनते हैं।
HTML कोड विशेष रूप से लैटिन अक्षरों में लिखे गए हैं और टैग कहलाते हैं, और प्रत्येक कोड कोण कोष्ठक में संलग्न है। कुछ टैग युग्मित हैं, कुछ अयुग्मित हैं।
पेयर्ड का मतलब है कि उन्हें बिना किसी असफलता के जोड़े में इस्तेमाल किया जाना चाहिए। उदाहरण के लिए, ओपनिंग टैग इंगित करता है कि यह वेब पेज पर कहां से शुरू होता है, और क्लोजिंग टैग इंगित करता है कि यह कहां रुकता है। उद्घाटन कोण ब्रैकेट के बाद स्लैश वर्ण की उपस्थिति से उत्तरार्द्ध पूर्व से भिन्न होता है। उदाहरण के लिए, ओपनिंग टैग है,क्लोजिंग टैग है।
अयुग्मित टैग को भागीदार की आवश्यकता नहीं है।
कई टैग में विशेषताएँ हो सकती हैं - अतिरिक्त तत्व जो इसे कुछ और विशिष्ट अर्थ देते हैं। उदाहरण के लिए, टैग.
जहां HTML का उपयोग किया जाता है
HTML की आवश्यकता कहां है, इसकी क्लासिक समझ वेबसाइट निर्माण है।
व्यवहार में, यह पर्याप्त हो सकता है, क्योंकि HTML आपको साइट के मुख्य तत्व, मेनू (बहु-स्तरीय वाले सहित) बनाने की अनुमति देता है, पृष्ठभूमि सेट करता है, पाठ, चित्र, ऑडियो, वीडियो सम्मिलित करता है, फोंट संपादित करता है और भी बहुत कुछ।
हालाँकि, ऐसी अन्य भाषाएँ हैं जो आपको वेब पेज पर अधिक दिलचस्प और अक्सर आवश्यक तत्व जोड़ने की अनुमति देती हैं:
- सीएसएस टैग का उपयोग करके अलग-अलग तत्वों की शैली सुविधाओं को लगातार निर्धारित करने की आवश्यकता के बिना पूरी साइट के लिए शैलियों को सेट करता है - उदाहरण के लिए, पाठ का रंग और फ़ॉन्ट।
- स्क्रिप्ट भाषा आपको साइट पर मिनी-प्रोग्राम (स्क्रिप्ट) विकसित करने और एम्बेड करने की अनुमति देती है, से लेकरसाधारण सौंदर्य संबंधी चीजें (माउस के ऊपर मंडराने पर लिंक का रंग बदलना) और कार्यात्मक लोगों के साथ समाप्त होना (ग्राहक ईमेल पते, फोन नंबर एकत्र करना)।
- PHP के साथ आप अपनी खुद की गेस्टबुक या कमेंटिंग सिस्टम विकसित कर सकते हैं।
वितरण के लिए ईमेल बनाने में भी HTML का उपयोग किया जाता है।
लिंक क्या है
वे आपको साइट के अंदर और बाहरी दोनों जगह दूसरे वेब पेज पर नेविगेट करने की अनुमति देते हैं।
एचटीएमएल लिंक आमतौर पर उपयोग किए जाते हैं:
- बाहरी वेब संसाधन पर जाने के लिए।
- साइट के भीतर के पृष्ठों को देखने के लिए।
- गूगल फॉर्म पर जाने के लिए।
एचटीएमएल में स्रोत के लिए एक लिंक भी अक्सर इंगित किया जाता है, खासकर जब से किसी अन्य साइट से सामग्री की प्रतिलिपि बनाते समय, आपको लेखक को निर्दिष्ट करना होगा। अन्यथा, बिना एट्रिब्यूशन के कॉपी करना कॉपीराइट उल्लंघन, सामग्री की चोरी और बैकफ़ायर की परिभाषा के अंतर्गत आ सकता है। इसके अलावा, उधार ली गई, गैर-अद्वितीय सामग्री का उपयोग एसईओ प्रदर्शन को कम करता है, और स्रोत के लिए एक लिंक का संकेत जोखिम को कम करता है।
लिंक के प्रकार
शास्त्रीय अर्थ में, एक लिंक एक वेब संसाधन का पता है जिस पर आप क्लिक करके जा सकते हैं।
इसके अलावा, हाइपरलिंक हैं: टेक्स्ट और इमेज। इन मामलों में, HTML लिंक किसी वाक्य (शब्द) या छवि के तहत "छुपा" है, और इसका पालन करने के लिए, आपको टेक्स्ट या छवि पर क्लिक करना होगा।
अन्य प्रकार के लिंक:
- अनविजिटेड - एक लिंक जिसे किसी विशेष सत्र के दौरान अभी तक क्लिक नहीं किया गया है। उदाहरण के लिए, यदि आपने कल इस लिंक का अनुसरण किया है, तो अपना कंप्यूटर बंद कर दिया है, और आज इसे फिर से चालू कर दिया है, अब लिंक फिर से नहीं देखा गया है, क्योंकि एक नया सत्र शुरू हो गया है।
- सक्रिय - इस अवस्था में, लिंक बहुत कम समय के लिए सहेजा जाता है: लिंक पर क्लिक करने और उसका अनुसरण करने के बीच का अंतराल।
- विज़िट - एक लिंक जिसे एक सत्र के दौरान कम से कम एक बार देखा जा चुका है।
नियमित टेक्स्ट लिंक के लिए, विज़िट किए गए लोग रंग बदलते हैं जब तक कि अन्यथा निर्दिष्ट न हो।
एक हाइपरलिंक की गई छवि अपना स्वरूप नहीं बदलती, चाहे वह देखी गई हो या नहीं।
नियमित लिंक कैसे डालें
कई वेब संसाधन साइट के पते को एक लिंक के रूप में देखते हैं, इसे तुरंत क्लिक करने योग्य बनाते हैं और इसे रंग से हाइलाइट करते हैं। उदाहरण के लिए, यदि पता किसी संदेशवाहक या ई-मेल द्वारा भेजा जाता है, तो उस पर क्लिक करके आप साइट पर जा सकते हैं।
एचटीएमएल का उपयोग करके स्वयं साइट बनाने के मामले में, आपको एक विशेष टैग का उपयोग करके एक लिंक सम्मिलित करना होगा। यह इस तरह दिखेगा: वेबसाइट का पता। HTML में लिंक टेक्स्ट को प्रोटोकॉल के साथ पूर्ण रूप से निर्दिष्ट किया जाना चाहिए।
टेक्स्ट हाइपरलिंक कैसे डालें
यह पहले कहा गया था कि एक टेक्स्ट हाइपरलिंक एक नियमित लिंक के समान कार्य करता है, लेकिन अधिक सौंदर्यपूर्ण रूप से प्रसन्न दिखता है: साइट के पते के बजाय, जो अक्सर अनावश्यक रूप से लंबा होता है, एक शब्द या वाक्यांश इंगित किया जाता है। उदाहरण के लिए, "यहां जानकारी खोजें" वाक्य में, आप लिंक को छिपा सकते हैंशब्द "यहाँ"। इसे हाइलाइट किया जाएगा और इस पर क्लिक करने से उपयोगकर्ता वांछित साइट पर पहुंच जाएगा।
एचटीएमएल लिंक कैसे बनाये इसकी चर्चा पहले ही की जा चुकी है। आप उसी टैग का उपयोग करके टेक्स्ट हाइपरलिंक सम्मिलित कर सकते हैं। अंतर केवल इतना है कि आपको टैग के बीच उस टेक्स्ट को निर्दिष्ट करने की आवश्यकता है जिसके अंतर्गत लिंक छिपा होगा: दृश्यमान टेक्स्ट।
छवि हाइपरलिंक कैसे डालें
यहाँ यह थोड़ा अधिक जटिल है। हम एक ही टैग का उपयोग करते हैं, लेकिन पाठ के बजाय, आपको छवि के लिए पथ निर्दिष्ट करने की आवश्यकता है।
पथ छवि का स्थान है। यदि चित्र (फोटो) फ़ाइल साझाकरण सेवा पर स्थित है, तो आपको स्लैश के माध्यम से छवि के पथ के साथ सभी फ़ोल्डर निर्दिष्ट करने होंगे। यदि संभव हो तो आप किसी छवि का लिंक भी शामिल कर सकते हैं।
टैग करने के लिए
src के अलावा, अन्य विशेषताएँ भी लागू होती हैं, जिससे आप छवि की ऊँचाई, चौड़ाई और स्थान को समायोजित कर सकते हैं और बहुत कुछ। उनमें से कुछ:
- Src - छवि के लिए पथ निर्दिष्ट करता है।
- Lowsrc - पिछली विशेषता के समान, लेकिन निम्न गुणवत्ता वाली छवियों के लिए निर्दिष्ट।
- ऊंचाई - तस्वीर की ऊंचाई।
- चौड़ाई - इसकी चौड़ाई।
- Alt - छवि विवरण। जब आप किसी फ़ोटो या चित्र पर होवर करते हैं, तो इस विशेषता में निर्दिष्ट टेक्स्ट पॉप अप हो जाएगा।
- बॉर्डर - इमेज के चारों ओर बॉर्डर की मोटाई निर्धारित करता है।
विशेषताएं टैग के बाद निर्दिष्ट की जाती हैं और इसमें शामिल होती हैंइसकी रचना। विशेषता का उसके मूल्य के बाद पालन किया जाना चाहिए। उदाहरण के लिए, विशेषताओं के लिए "ऊंचाई" या "चौड़ाई" (ऊंचाई, चौड़ाई) वेब पेज पर छवि की ऊंचाई निर्दिष्ट करती है। माप की इकाई पिक्सेल है, जब तक कि अन्यथा निर्दिष्ट न हो।
यह इस तरह दिखेगा: <a href="वेब पेज का पता"
। ये विशेषताएँ छवि के लिए उपयुक्त आकार निर्धारित करने में मदद करेंगी। बॉर्डर इमेज के चारों ओर एक अदृश्य बॉर्डर बनाने में मदद करता है।
उपरोक्त विशेषताएँ इमेज इंसर्शन टैग पर अलग से लागू होती हैं। उदाहरण के लिए:.
एंकर लिंक क्या हैं
एंकर लिंक बनाना एक बहुत ही उपयोगी कौशल है। अक्सर एक वेब पेज को एक लंबे टेक्स्ट ब्लॉक या एक पेज पर कई उपखंडों के साथ रखने की आवश्यकता होती है। इस मामले में, आप तुरंत पाठ या वेब पेज के उपखंडों के लिंक की सूची के साथ शुरू कर सकते हैं, और जब आप उन पर क्लिक करते हैं, तो उपयोगकर्ता सीधे अनुरोधित अनुभाग पर जाएगा।
एंकर लिंक बनाने के लिए अन्य प्रकार के लिंक की तुलना में विशेषता टैग के अधिक उपयोग की आवश्यकता होगी।
सबसे पहले, आपको शीर्ष विशेषता का उपयोग करके सूचना के प्रत्येक ब्लॉक या पाठ के उपखंड के लिए समग्र मूल्य निर्धारित करने की आवश्यकता है, और फिर इसे संबंधित लिंक से संबद्ध करें।
उनकी विशेषताएं अधिक व्यापक हैं, इसलिए सलाह दी जाती है कि पहले सरल लिंक के निर्माण में महारत हासिल करें, और फिर एंकर लिंक के निर्माण पर आगे बढ़ें।
टिप्स
अनुभवी से मददप्रोग्रामर:
- आप इसे बना सकते हैं ताकि किसी लिंक के बारे में जानकारी HTML में होवर पर प्रदर्शित हो। इसके लिए, alt विशेषता, जिसका उपयोग हम ग्राफिक तत्वों के लिए भी करते हैं, काम आ सकती है।
- एचटीएमएल का उपयोग करके लिंक की सूची बनाना संभव है। विशेष रूप से, यह एंकर लिंक के लिए उपयोगी हो सकता है, साथ ही जब आपको वेब संसाधनों की एक सूची बनाने की आवश्यकता होती है जिसके बाद वर्तमान वेब पेज से सीधे एक लिंक का अनुसरण किया जा सकता है।
- सीएसएस और जावास्क्रिप्ट की मदद से, साथ ही साथ कुछ एचटीएमएल फ़ंक्शंस, आप सामान्य से टेक्स्ट लिंक और हाइपरलिंक्स का एक अलग डिज़ाइन बना सकते हैं। उदाहरण के लिए, जब आप किसी लिंक पर होवर करते हैं, तो यह अपना रंग बदल सकता है और जब कर्सर इससे दूर होता है तो पिछले वाले पर वापस आ सकता है। यह एक कस्टम जावास्क्रिप्ट स्क्रिप्ट के साथ किया जा सकता है। इसके अलावा, लिंक रंग को बिना विज़िट किए जाने के लिए नीले या विज़िट किए गए बैंगनी रंग के अलावा किसी अन्य चीज़ पर सेट किया जा सकता है। यह सीएसएस का काम है।
- लिंक का दुरुपयोग न करें। कई अनुपयुक्त लिंक वाला एक वेब पेज टेढ़ा और टेढ़ा दिखता है।
- सुनिश्चित करें कि उपयोगकर्ता समझता है कि छवि के साथ हाइपरलिंक वास्तव में एक छवि है, न कि केवल एक छवि।
निष्कर्ष
एचटीएमएल में किसी पेज से लिंक करना बहुत आसान है। इस भाषा के सभी मुख्य बिंदुओं का पालन करना महत्वपूर्ण है, क्योंकि एक छोटी सी गलती भी इस तथ्य को जन्म दे सकती है कि कोई परिणाम नहीं होगा, और कोड काम नहीं करेगा।
