लक्ष्य के बिना शुद्ध सीएसएस में ईवेंट पर क्लिक करें। हाइपरलिंक - यह क्या है, एक लिंक कैसे बनाएं और HTML में कोड कैसे डालें (href, लक्ष्य रिक्त और टैग के अन्य गुण) डिफ़ॉल्ट मान

आप छद्म-वर्ग:लक्ष्य का उपयोग करके इंटरनेट पर कई ट्यूटोरियल आसानी से पा सकते हैं। हालाँकि, आइए किसी और के कोड का अनुसरण न करें, बल्कि इसे समझने का प्रयास करें और समझें कि यह कैसे काम करता है? बेशक, हम उदाहरणों के बिना नहीं कर सकते।

लक्ष्य क्या है?

सीएसएस में: लक्ष्य, यह एक छद्म वर्ग है जो आपको अपने HTML दस्तावेज़ का एक संपूर्ण "टुकड़ा" चुनने की अनुमति देता है जिस पर कुछ कार्रवाई की जाएगी। उदाहरण के लिए, यह पाठ का एक पैराग्राफ या शीर्षक हो सकता है।

छद्म-वर्गों को छद्म-तत्वों के साथ भ्रमित नहीं किया जाना चाहिए, जो किसी तत्व के केवल एक निश्चित भाग का चयन कर सकते हैं, जैसे कि पहला अक्षर या पैराग्राफ की पहली पंक्ति।

छद्म कक्षाएं:

• ए:लिंक(रंग:#111)
• ए:होवर(रंग:#222)
• div:पहला बच्चा(रंग:#333)

• p::पहला अक्षर(रंग:#444)
• p::पहली पंक्ति(रंग:#555)

खंड आईडी

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

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

यह शुद्ध HTML में काम करता है, किसी ट्रिक की आवश्यकता नहीं है। छोटे पहचानकर्ता.

लक्ष्य का उपयोग करके एक क्लिक को संभालना

आइए अब यह सुनिश्चित करने का प्रयास करें कि जब आप हमारे तात्कालिक मेनू से वांछित अनुभाग पर क्लिक करते हैं, तो शीर्षक शैली बदल जाती है, जिससे पता चलता है कि वर्तमान में कौन सा पैराग्राफ सक्रिय है।

H1 (फ़ॉन्ट: 30px एरियल सैन्स-सेरिफ़;) h1:लक्ष्य (फ़ॉन्ट-आकार: 50px; पाठ-सजावट: रेखांकित; रंग: #37aee4;)

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

एच1 (फ़ॉन्ट: 30पीएक्स एरियल सेन्स-सेरिफ़; -वेबकिट-संक्रमण: रंग 0.5एस आसानी; -मोज़-संक्रमण: रंग 0.5एस आसानी; -ओ-संक्रमण: रंग 0.5एस आसानी; -एमएस-संक्रमण: रंग 0.5एस आसानी; संक्रमण: रंग 0.5s सहजता)

सक्रिय शीर्षक को हाइलाइट करना अच्छी बात है, लेकिन क्या होगा यदि आपको इसके बाद आने वाले टेक्स्ट का डिज़ाइन बदलने की आवश्यकता हो? सीएसएस हमें यह अवसर देता है. यह इस तरह दिख रहा है:

H1: लक्ष्य + p (पृष्ठभूमि: #eaeaea; पैडिंग: 10px;)

इस मामले में, प्लस का मतलब है कि शैली को शीर्षक के बाद पैराग्राफ पर लागू किया जाना चाहिए। इस प्रकार, जब सक्रिय हेडर बदलता है, तो हम अनुभाग डिज़ाइन भी बदलते हैंउस पाठ के साथ जो "उसका" है।

ब्राउज़र समर्थन

लक्ष्य छद्म वर्ग सीएसएस के तीसरे संस्करण से संबंधित है और IE को छोड़कर, संस्करण 9 से पुराने सभी ब्राउज़रों द्वारा पूरी तरह से समर्थित है। इसलिए, यदि आपके दर्शक इस ब्राउज़र का उपयोग करते हैं तो आपको इसे लागू नहीं करना चाहिए। हालाँकि, एक रास्ता है - यह सेलेक्टविज़्र है, एक जेएस लाइब्रेरी जिसके साथ आप IE को CSS3 के साथ काम करा सकते हैं। हम बस स्क्रिप्ट जोड़ते हैं और बस, यह काम करती है।

एकमात्र बात यह है कि, यदि आप JQuery या MooTools का उपयोग नहीं करते हैं, तो आपको इस स्क्रिप्ट को काम करने के लिए इसे कनेक्ट करना होगा। आधिकारिक वेबसाइट पर एक तालिका है जिसमें दिखाया गया है कि कौन सी लाइब्रेरी किसका समर्थन करती है। यदि आप रुचि रखते हैं तो इसे पढ़ें। यह ।

निष्कर्ष

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

सौंदर्य और ब्राउज़र समर्थन के साथ इसे ज़्यादा न करें और सब कुछ ठीक हो जाएगा।

आपका दिन शुभ हो

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

लक्ष्य क्या है?

h1 ( फ़ॉन्ट: बोल्ड 30px/1.5 "हेल्वेटिका न्यू", एरियल, हेल्वेटिका, जिनेवा, सेन्स-सेरिफ़; ) h1: लक्ष्य (फ़ॉन्ट-आकार: 50px; पाठ-सजावट: रेखांकित; रंग: #37aee4; )

आइए एनिमेशन जोड़ें

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

h1 (फ़ॉन्ट: बोल्ड 30px/1.5 "हेल्वेटिका न्यू", एरियल, हेल्वेटिका, जिनेवा, सेन्स-सेरिफ़; -वेबकिट-ट्रांज़िशन: रंग 0.5s आसानी; -मोज़-ट्रांज़िशन: रंग 0.5s आसानी; -ओ-ट्रांज़िशन: रंग 0.5 एस आसानी; -एमएस-संक्रमण: रंग 0.5एस आसानी; संक्रमण: रंग 0.5एस आसानी;

गैर-लक्ष्य वस्तु प्रबंधन

मान लीजिए कि हम चयनित शीर्षक के बाद आने वाले पैराग्राफ की शैलियों को बदलना चाहते हैं।

निम्नलिखित कोड का उपयोग करके ऐसा करना बहुत आसान है। डेमो देखें.

h1: लक्ष्य + р (पृष्ठभूमि: #f7f7f7; पैडिंग: 10px;)

सीएसएस का उपयोग करके एक सरल स्लाइड शो बनाना

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

आइए एक अव्यवस्थित सूची बनाएं। प्रत्येक सूची आइटम में स्निपेट आईडी की ओर इशारा करने वाला एक टैग एंकर और संबंधित आईडी वाली एक छवि होगी।

• एक
• दो
• तीन
• चार
• पाँच

आइए अब अपनी शैलियाँ जोड़ें:

* (मार्जिन: 0पीएक्स; पैडिंग: 0पीएक्स; ) #स्लाइड शो (मार्जिन: 50पीएक्स ऑटो; स्थिति: सापेक्ष; चौड़ाई: 400पीएक्स; ) उल (सूची-शैली: कोई नहीं;) ली (फ्लोट: बाएं; ओवरफ्लो: छिपा हुआ; मार्जिन: 0 20पीएक्स 0 0; ) ली ए (रंग: #222; पाठ-सजावट: कोई नहीं; फ़ॉन्ट: 15पीएक्स/1 हेल्वेटिका, सैन्स-सेरिफ़; -वेबकिट-संक्रमण: रंग 0.5एस सहजता; -मोज़-संक्रमण: रंग 0.5एस सहजता; -ओ-संक्रमण: रंग 0.5एस सहजता; संक्रमण: रंग 0.5एस सहजता; होवर (रंग: #50बी0डीएफ;) ली आईएमजी (स्थिति: पूर्ण; शीर्ष: 50पीएक्स; बाएँ) : 0; z-सूचकांक: -1; -वेबकिट-संक्रमण: अपारदर्शिता 1s सुगमता-अंदर-बाहर; -एमएस-संक्रमण: 1s सुगमता-अंदर-बाहर; : अपारदर्शिता 1s आसानी से अंदर-बाहर; ) ली आईएमजी:लक्ष्य (जेड-सूचकांक: 1; ) ली आईएमजी:नहीं(:लक्ष्य) (अपारदर्शिता: 0; )

सबसे पहले जोड़ते हैं नाव छोड़ीहमारी सूची के सभी तत्व। हमने तत्वों के लिए निरपेक्ष और सापेक्ष स्थिति का उपयोग किया।

अगला, आइए इंस्टॉल करें z-सूचकांक:-1सभी छवियों के लिए और फिर सेट करें z-सूचकांक: 1लक्ष्य छवियों के लिए. इससे जब आप किसी सूची आइटम पर क्लिक करेंगे तो छवि बदल जाएगी। संक्रमण को आसान बनाने के लिए, हम अन्य छवियों के लिए अपारदर्शिता मान निर्धारित करेंगे 0 .

शुद्ध सीएसएस स्लाइड शो डेमो देखें।

क्रॉस-ब्राउज़र अनुकूलता

छद्म वर्ग : लक्ष्यएक तृतीय-स्तरीय सीएसएस चयनकर्ता है, जिसका अर्थ है कि यह (आप कभी अनुमान नहीं लगा पाएंगे) को छोड़कर लगभग हर ब्राउज़र में समर्थित है... IE। अच्छा पुराना गधा केवल संस्करण 9 और 10 में CSS3 चयनकर्ताओं का समर्थन करता है।

IE में CSS3 चयनकर्ताओं को प्रदर्शित करने के साथ किसी भी अन्य समस्या की तरह, यह चयनकर्ता के साथ काफी आसान समाधान है।

इस प्लगइन और कुछ वूडू जादू के लिए धन्यवाद, आवश्यक CSS3 चयनकर्ताओं को IE6 में भी समर्थित किया जाएगा।

निष्कर्ष

छद्म-वर्गों का उपयोग करना पहली बार में जटिल लग सकता है, लेकिन आप समझेंगे कि वे कैसे आपके काम को आसान बना सकते हैं और आपकी साइट को और अधिक रोचक बना सकते हैं। छद्म चयनकर्ता

:लक्ष्य- इसका एक अच्छा उदाहरण. बस यह सुनिश्चित करें कि आप शैलियों के साथ अति न करें।

एक और दिलचस्प उपयोग का मामला :लक्ष्य

नमस्कार, ब्लॉग साइट के प्रिय पाठकों। मैंने आज के प्रकाशन को वेबमास्टरिंग के सबसे महत्वपूर्ण पहलू के लिए समर्पित करने का निर्णय लिया है, जहां मैं विस्तार से समझाने की कोशिश करूंगा कि हाइपरलिंक क्या है, जो कि अटूट रूप से जुड़ा हुआ है, जो बदले में, अतिशयोक्ति के बिना, इंटरनेट का आधार है।

लेकिन हाइपरलिंक को सही ढंग से बनाने और उन्हें वेब पेजों के कोड (उदाहरण के लिए, आपकी वेबसाइट) में डालने के लिए, आपको हाइपरटेक्स्ट मार्कअप लैंग्वेज () के संबंधित क्षेत्र का अध्ययन करने की आवश्यकता है, क्योंकि ये तत्व HTML का उपयोग करके बनाए जाते हैं। एक टैग, जो लिंक को वांछित प्रकार में अपग्रेड करने की क्षमता रखता है।

तो, आज हम देखेंगे कि हाइपरलिंक में कौन से भाग होते हैं, कैसे लक्ष्य रिक्त विशेषता का उपयोग करने से एक पृष्ठ को एक नई विंडो (टैब) में खोलना संभव हो जाता है, किसी भी चित्र को एक लिंक कैसे बनाया जाए, और कई अन्य महत्वपूर्ण विवरण। अन्य बातों के अलावा, यह जानकारी आपको HTML भाषा सीखने में आगे बढ़ाएगी।

हाइपरलिंक क्या है और क्या इसे लिंक कहा जा सकता है?

शीर्षक में पूछे गए प्रश्न का उत्तर देते हुए, मैं कहूंगा कि "लिंक" शब्द का अर्थ व्यापक है (साइबेरिया से लिंक, भुगतानकर्ता की पहचान के लिए बैंकिंग, पुस्तक में पाठ, आदि), जिसमें अवधारणा में निहित अर्थ भी शामिल है। "हाइपरलिंक", जो केवल हाइपरटेक्स्ट से जुड़ा है, जो जानकारी को गैर-रेखीय रूप से समझना संभव बनाता है।

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

लेकिन अदृश्य सेवाएँ भी हैं, जिनका उपयोग करके बनाया गया है और भीतर स्थित है, जिसका कार्य किसी विशेष कार्य को करने के लिए ब्राउज़रों को कई सिग्नल और कमांड भेजना है।

उदाहरण के लिए, सेवा हाइपरलिंक का उपयोग करके एक आइकन प्रदर्शित करना संभव है। उन्हें केवल HTML कोड के भाग के रूप में देखा जा सकता है (ऐसा करने के लिए, ब्राउज़र में खुले किसी भी पेज पर क्लिक करें):

अभी के लिए, आइए सेवा लिंक को अकेला छोड़ दें और हाइपरलिंक बनाने के सामान्य पैटर्न पर विचार करें। उनमें जो समानता है वह यह है कि उन सभी में समानता है आवश्यक href विशेषता, जिसका मान दस्तावेज़ का पता () है। एक HTML लिंक या तो साइट के आंतरिक पृष्ठ या बाहरी दस्तावेज़ तक ले जा सकता है।

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

href का उपयोग करके HTML में हाइपरलिंक कैसे बनाएं

तो, हम पहले से ही जानते हैं कि एक लिंक बनाने के लिए a टैग और href विशेषता की आवश्यकता होती है, जिसके पैरामीटर विभिन्न प्रकार के URL हो सकते हैं। क्योंकि एयह, फिर उद्घाटन के बीच और समापनइसमें वह सामग्री शामिल है जो वेब पेज पर प्रदर्शित की जाएगी।

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

एंकरों के बारे में थोड़ा

HTTP के अतिरिक्त, सुरक्षित HTTPS प्रोटोकॉल का उपयोग किया जा सकता है। लिंक को किसी वेब पेज पर ले जाने की आवश्यकता नहीं है। यह सब href मान पर निर्भर करता है, जो कुछ फ़ाइल का पथ हो सकता है:

//साइट/wp-content/uploads/2012/05/gipersylqi-v-html.jpg

डाउनलोड करना

वेब पेज पर यह लिंक निम्नलिखित रूप लेगा:

ब्राउज़र "समझता है" कि .zip एक्सटेंशन वाला ऑब्जेक्ट केवल डाउनलोड करने के लिए हो सकता है, जो कि उपयोगकर्ता को करने के लिए प्रेरित किया जाता है।

वैसे, किसी भी फ़ाइल का पथ कभी-कभी FTP() के माध्यम से दर्शाया जाता है। फिर href विशेषता पैरामीटर के रूप में उपयोग किए जाने वाले URL में, आपको बस HTTP प्रोटोकॉल (HTTPS) को FTP से बदलना चाहिए। फ़ाइल लिंक इस तरह दिखेगा:

सर्वर से डाउनलोड करें

लेकिन वह सब नहीं है। एक समान तरीके से मेल्टो छद्म-प्रोटोकॉल का उपयोग करके एक ईमेल लिंक बनाया जाता हैपत्र लेखन उपकरण तक शीघ्रता से पहुंचने के लिए:

पत्र लिखना

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

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

लेकिन वेब संसाधनों पर इस प्रकार का संचार अब इतना लोकप्रिय नहीं है (खासकर जब से इसे स्थापित किया जा सकता है, उदाहरण के लिए), क्योंकि इस तरह से खोले गए ईमेल पते सक्रिय रूप से सॉफ़्टवेयर द्वारा इंटरसेप्ट किए जाते हैं और विभिन्न प्रकार के स्पैमर द्वारा उपयोग किए जाते हैं।

मैंने एक उदाहरण के रूप में केवल सबसे सामान्य प्रोटोकॉल दिए हैं जो यूआरएल का हिस्सा हैं, जो बदले में, हाइपरलिंक बनाते समय href विशेषता का एक पैरामीटर है। HTTP (HTTPS), FTP और mailto के अलावा, अधिक विशिष्ट समस्याओं को हल करने के लिए अन्य भी हैं। शायद हम अन्य प्रकाशनों में उन पर अधिक विस्तार से विचार करेंगे।

हाइपरलिंक के प्रकार

आइए अब कुछ मानदंडों के अनुसार लिंक को वर्गीकृत करने का प्रयास करें।

उनके दायरे के अनुसार:

1. बाहरी- जिस साइट पर वे पोस्ट किए गए हैं, उसके बाहर स्थित पृष्ठों पर ले जाएं;

2. घरेलू— एक ही वेब संसाधन के भीतर स्थित वेब पेजों को कनेक्ट करें।

प्रारूप के अनुसार:

2. रेखांकनई - इस मामले में, हाइपरलिंक का एंकर एक छवि (थंबनेल सहित), बैनर, बटन इत्यादि है।

href विशेषता के मान के रूप में कार्य करने वाले URL के प्रकार के अनुसार:

1. निरपेक्ष, जिसमें डेटा ट्रांसफर प्रोटोकॉल (उदाहरण के लिए, HTTP) और साइट के डोमेन नाम (डोमेन के बारे में हर चीज में) का स्पष्ट संकेत होता है।

बाहरी संसाधनों के पृष्ठों का संदर्भ देते समय ऐसे लिंक का सबसे अधिक उपयोग किया जाता है। इस मामले में, href मान में वांछित फ़ाइल या वेब पेज का पूरा पथ शामिल होगा। यहां पूर्ण हाइपरलिंक का एक उदाहरण दिया गया है:

प्रसंग - यह क्या है?

2. रिश्तेदार, बनाने के विकल्पों में से एक वेबसाइट के रूट फ़ोल्डर के सापेक्ष निर्दिष्ट पथ होगा (इसलिए इस प्रकार के हाइपरलिंक का नाम)। इस स्थिति में, प्रोटोकॉल (HTTP) और साइट डोमेन को URL से हटा दिया जाएगा:

प्रसंग - यह क्या है?

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

ए टैग के गुण

अब आइए देखें कि आवश्यक href के अलावा अन्य कौन सी विशेषताएँ मौजूद हैं, और वे हाइपरलिंक के निर्माण को कैसे प्रभावित कर सकते हैं। इस संबंध में सबसे संपूर्ण डेटा, यदि कहें तो, "प्रथम-हाथ", आप अंतर्राष्ट्रीय W3C कंसोर्टियम की आधिकारिक वेबसाइट पर पा सकते हैं, जहां नवीनतम जानकारी सबसे तेज़ी से दिखाई देती है।

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

प्रसंग - यह क्या है?

हालांकि कुछ वेबमास्टर्स और एसईओ विशेषज्ञों का मानना ​​​​है कि यदि विज़िटर को चुनने का अवसर दिया जाए (अर्थात लक्ष्य रिक्त निर्दिष्ट न करें) तो बेहतर है, क्योंकि यदि आवश्यक हो, तो पृष्ठ को संदर्भ मेनू (स्थानांतरित करें) का उपयोग करके एक नए टैब में खोला जा सकता है लिंक पर कर्सर, राइट-क्लिक करें और उचित बिंदु पर क्लिक करें):

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

लेकिन मेरा मानना ​​है कि सभी नौसिखिए उपयोगकर्ता लोकप्रिय ब्राउज़रों () की क्षमताओं और सेटिंग्स से पूरी तरह परिचित नहीं हैं। यह काफी संभव है कि एक पाठक, एक बाहरी हाइपरलिंक का अनुसरण कर रहा है और स्रोत पृष्ठ (इसके बजाय प्राप्तकर्ता दस्तावेज़ दिखाई देगा) की दृष्टि खो चुका है, बस निराशा में टैब बंद कर देगा।

इस प्रकार, एक वेब संसाधन का मालिक न केवल एक होनहार आगंतुक को खो सकता है, बल्कि व्यवहार संबंधी कारकों में भी गिरावट प्राप्त कर सकता है (), जिससे रैंकिंग में पृष्ठ की स्थिति का नुकसान होगा।

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

एक वस्तुनिष्ठ चित्र बनाने के लिए, यह जोड़ा जाना चाहिए कि किसी भी बाहरी लिंक पर “target=”_blank”” लागू करना कुछ सुरक्षा जोखिमों से भरा हो सकता है। यदि किसी को रुचि है, तो आप पढ़ सकते हैं, जहां लक्ष्य रिक्त का उपयोग करते समय समस्याओं के निवारण के लिए सिफारिशें दी गई हैं, साथ ही एक नए टैब में एक वेब पेज खोलने के कार्य को लागू करने के लिए वैकल्पिक विकल्प भी दिए गए हैं।

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

फिलहाल, मेरे लिए इसके फायदे नुकसान से कहीं ज्यादा हैं और मैं इसका बिना शर्त समर्थक हूं। उपरोक्त तथ्यों के आधार पर आप इस मुद्दे पर अपनी राय बना सकते हैं। हालाँकि...नई परिस्थितियों के उद्भव को ध्यान में रखते हुए, इसमें बदलाव हो सकता है।

हैश लिंक, एंकर कैसे बनाएं और उनकी आवश्यकता क्यों है?

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

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

ऐसे लिंक काफी सरलता से बनाए जाते हैं। सबसे पहले आपको बनाने की जरूरत है लंगरएक आईडी के रूप में पृष्ठ पर आवश्यक स्थान पर संबंधित लेबल रखकर, जो किसी भी HTML टैग पर लागू वैश्विक विशेषताओं में से एक है।

आईडी की सार्वभौमिकता के कारण, ऐसे एंकर टैग वेब पेज पर लगभग कहीं भी स्थापित किए जा सकते हैं। चूँकि पाठ आमतौर पर अनुच्छेदों में विभाजित होता है, इसलिए उन्हें इसमें भी लागू किया जा सकता है। मैं मुख्य रूप से एंकर डालता हूं जिसके साथ लेखों को तार्किक भागों में विभाजित किया जाता है:

इस प्रकार HTML कोड में सभी आवश्यक स्थानों को चिह्नित करने के बाद, हम उनके लिए हाइपरलिंक बनाते हैं। ऐसा करने के लिए, अंत में, URL में अंतिम स्लैश "/" के बाद (जो, जैसा कि आप पहले से ही जानते हैं, href विशेषता का मान है), हम क्रमिक रूप से पाउंड चिह्न "#" और लेबल नाम (आईडी) लिखते हैं ):

हैश लिंक और एंकर कैसे बनाएं?

इसके अलावा, यदि ऐसे एंकर लिंक को एंकर के समान पृष्ठ पर रखा जाता है, तो हैश से पहले अंतिम स्लैश सहित यूआरएल का हिस्सा छोड़ा जा सकता है और केवल "#" प्लस आईडी नाम को href पैरामीटर के रूप में उपयोग किया जाता है (संक्षेप में, यह सापेक्ष लिंक के विकल्पों में से एक है):

हैश लिंक और एंकर कैसे बनाएं?

यानी, HTML कोड को अनुकूलित करने के लिए किसी मैनुअल के लिए सामग्री तालिका संकलित करते समय, आप आसानी से इस हल्के विकल्प का उपयोग कर सकते हैं। यदि आप पहचानकर्ता के नाम के बिना, यूआरएल के रूप में केवल एक हैश चिह्न डालते हैं, तो उस स्थान से जहां ऐसा लिंक स्थित है, पृष्ठ पूरी तरह ऊपर की ओर स्क्रॉल हो जाएगा:

शीर्ष

दरअसल, यह सबसे सरल विकल्प है, जो फिर से संसाधन की उपयोगिता के लिए एक अतिरिक्त लाभ के रूप में कार्य करता है, क्योंकि यह अपने आगंतुकों के लिए जीवन को आसान बनाता है। आप एक बटन बनाने के लिए एक आकर्षक चित्र को एंकर के रूप में उपयोग कर सकते हैं।

अंडरलाइन कैसे हटाएं और लिंक का रंग कैसे बदलें

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

यदि उसे ऐसी हरकतें बार-बार दोहराने की जरूरत है, तो वह तुरंत यह निर्धारित करने में सक्षम होगा कि उसने कौन से लिंक पहले ही क्लिक किए हैं और कौन से नहीं। यह विकल्प लगभग हर ब्राउज़र में शामिल होता है। यह कितना सुविधाजनक है और कितना समय बचाता है, यह बताने की जरूरत नहीं है।

डिफ़ॉल्ट और गैर-सीएसएस हाइपरलिंक रेखांकित और तीन रंग विकल्पों के साथ हाइलाइट किया गया, जिनमें से प्रत्येक की अपनी विशेषता है:

• लिंक - वेब पेज पर हाइपरलिंक का रंग सेट करता है (डिफ़ॉल्ट रूप से नीला, जिसे #0000ff निर्दिष्ट किया गया है);
• एलिंक - वेब ब्राउज़र द्वारा संसाधित होने की अवधि के लिए सक्रिय हाइपरलिंक का रंग (लाल #ff0000);
• वीलिंक - उपयोगकर्ता द्वारा देखे गए लिंक का रंग (बैंगनी, #800080)।

आप अपनी साइट के लिए ब्राउज़र द्वारा प्रदर्शित लिंक के रंग कैसे बदल सकते हैं? खैर, एक साधारण HTML साइट के लिए जहां पेज मैन्युअल रूप से बनाए जाते हैं (और आधुनिक वास्तविकताओं में, मुझे लगता है कि साधारण डायरियों और लैंडिंग पेजों को छोड़कर, इस तरह के व्यावहारिक रूप से कोई पूर्ण कार्यात्मक संसाधन नहीं बचे हैं), आपको बस शुरुआती टैग ढूंढना होगा और इसके लिए आवश्यक पैरामीटर निर्दिष्ट करें (वैसे, आप रंग को इंगित करने के लिए इसके नाम का उपयोग कर सकते हैं), उदाहरण के लिए:

यदि आपने अपने वेब संसाधन को प्रशासित करने के लिए एक सामग्री प्रबंधन प्रणाली () स्थापित की है, तो, आपके द्वारा उपयोग किए जाने वाले इंजन के प्रकार की परवाह किए बिना, आपको हेडर (हेडर) प्रदर्शित करने के लिए जिम्मेदार फ़ाइल को संपादित करने के लिए खोलने की आवश्यकता है, जहां एक उद्घाटन टैग है .

यदि आपका संसाधन वर्डप्रेस चला रहा है, तो इस विचार को व्यावहारिक रूप से लागू करने के लिए, आप इसे हाइपरलिंक के अंदर स्वचालित रूप से एक छवि डालने के लिए एक उपकरण के रूप में उपयोग कर सकते हैं, जहां आप पहले लाइब्रेरी से चयन करते हैं या वांछित छवि डाउनलोड करते हैं और इसे टेक्स्ट में डालते हैं:

फिर परिणामी छवि कोड का चयन करें और संपादक के "लिंक" बटन को दबाएं, जिसके बाद आप दिखाई देने वाली विंडो में वांछित कॉपी किए गए हाइपरलिंक को पेस्ट करें:

छद्म-वर्ग: लक्ष्य URL खंड द्वारा इंगित दस्तावेज़ में तत्व का चयन करता है। उदाहरण के लिए, पाठ का यह टुकड़ा एक तत्व में लपेटा गया है आईडी #लक्ष्य-परीक्षण के साथ। यदि आप लिंक का अनुसरण करते हैं, तो वह तत्व लक्ष्य बन जाएगा और छद्म-वर्ग: लक्ष्य शैलियाँ प्रभावी हो जाएंगी।

पिछले साल मैंने लेख 5 अप्रयुक्त सीएसएस चयनकर्ताओं (और उनका उपयोग कैसे करें) में लक्ष्य छद्म वर्ग के बारे में लिखा था। पहला उदाहरण पृष्ठ के उस अनुभाग को हाइलाइट करने के लिए छद्म-वर्ग: लक्ष्य का उपयोग कर रहा था जिस पर नेविगेट किया गया था। उदाहरण के लिए, यह पृष्ठभूमि रंग या बॉर्डर जोड़ना हो सकता है, जैसा कि उदाहरण में है।

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

उदाहरण #1: सामग्री छिपाना और दिखाना

लक्ष्य छद्म वर्ग का उपयोग करने का एक सरल उदाहरण उस सामग्री को छिपाना और दिखाना होगा जिसे हम लक्षित कर रहे हैं। एक ब्लॉग में, हम उपयोगकर्ता द्वारा क्लिक करने के बाद एक टिप्पणी अनुभाग दिखा सकते हैं। यह केवल तत्व को छिपाकर किया जाता है जब तक कि वह:target के अंतर्गत न आ जाए।

टिप्पणियाँ दिखाएँ #टिप्पणियाँ:नहीं(:लक्ष्य) (प्रदर्शन: कोई नहीं; ) #टिप्पणियाँ:लक्ष्य (प्रदर्शन: ब्लॉक; )

उदाहरण #2: पुल-आउट नेविगेशन

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

#एनएवी (स्थिति: निश्चित; शीर्ष: 0; ऊंचाई: 100%; चौड़ाई: 80%; अधिकतम-चौड़ाई: 400पीएक्स; ) #एनएवी:नहीं(:लक्ष्य) (दायां: -100%; संक्रमण: दायां 1.5 सेकंड;) #एनएवी:लक्ष्य (दाएं: 0; संक्रमण: दाएं 1एस;)

उदाहरण #3: पॉप-अप मोडल विंडो

इस विचार को आगे बढ़ाते हुए, हम एक मोडल विंडो बना सकते हैं जो पूरे पेज को भर दे।

#मॉडल-कंटेनर (स्थिति: निश्चित; शीर्ष: 0; बाएं: 0; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि: आरजीबीए(0,0,0,0.8); प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; संरेखित-आइटम: केंद्र; ) .मोडल (चौड़ाई: 70%; पृष्ठभूमि: #fff; पैडिंग: 20px; पाठ-संरेखित: केंद्र; ) #मोडल-कंटेनर:नहीं(:लक्ष्य) (अस्पष्टता: 0; दृश्यता: छिपा हुआ; संक्रमण: अपारदर्शिता 1एस, दृश्यता 1एस; ) #मोडल-कंटेनर:लक्ष्य (अस्पष्टता: 1; दृश्यता: दृश्यमान; संक्रमण: अपारदर्शिता 1एस, दृश्यता 1एस;)

उदाहरण #4: वैश्विक शैलियाँ बदलना

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

#बॉडी:नहीं(:लक्ष्य) (मुख्य (चौड़ाई: 60%; ) एक तरफ (चौड़ाई: 30%; ) .शो-साइडबार-लिंक (डिस्प्ले: कोई नहीं; ) ) #बॉडी:लक्ष्य (मुख्य (चौड़ाई: 100%; ) ) एक तरफ (प्रदर्शन: कोई नहीं; ) .छिपाएँ-साइडबार-लिंक (प्रदर्शन: कोई नहीं; ) )

शब्दार्थ और अभिगम्यता के बारे में क्या?

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