आज कुनै पनि वेब पृष्ठलाई हेर्नुहोस् र तपाइँलाई ध्यान दिनुहोस् कि तिनीहरू केहि चीजहरू सामान्यमा साझेदारी गर्छन्। ती साझा गरिएको विशेषताहरू मध्ये एक छ तस्वीरहरु। दायाँ छविहरू वेबसाइटको प्रस्तुतीकरणमा धेरै थप गर्दछ। केहि छवियों, जस्तै एक कम्पनी को लोगो को साइट मा ब्रान्ड मा मदद गर्दछ र त्यो डिजिटल इकाई लाई तपाईंको शारीरिक कम्पनी मा जोड दि्छ।
छवि, आइकन वा ग्राफिक्स तपाईंको वेब पृष्ठमा थप्न को लागी, तपाईंले पृष्ठको एचटीएमएल कोडमा ट्याग प्रयोग गर्न आवश्यक छ। तपाईले एचएमएम ट्यागलाई तपाइँको HTML मा राख्नुहुन्छ जहाँ तपाईं ग्राफिक प्रदर्शन गर्न चाहानुहुन्छ। पृष्ठ ब्राउजर प्रतिपादन गर्दै वेब ब्राउजरले यो ट्यागलाई पृष्ठ हेरेको बेला उपयुक्त ग्राफिक्समा प्रतिस्थापन गर्नेछ। हाम्रो कम्पनी लोगो उदाहरणमा फर्कनुहोस्, यहाँ छ कसरी तपाईले यो छवि तपाइँको साइटमा थप्न सक्नुहुनेछ:
तस्बिर विशेषताहरू
माथि HTML कोड हेर्दै, तपाइँले देख्नु भएको छ कि तत्वले दुई गुणहरू समावेश गर्दछ। प्रत्येकका लागि आवश्यक छविको लागि आवश्यक छ।
पहिलो विशेषता "src" हो। यो एकदम शाब्दिक छवि फाइल हो जुन तपाईंले पृष्ठमा प्रदर्शन गर्न चाहानुहुन्छ। हाम्रो उदाहरणमा हामी "logo.png" नामक फाइल प्रयोग गर्दैछौं। यो ग्राफिक हो जुन वेब ब्राउजरले यो साइट प्रदान गर्दा प्रदर्शन गर्दछ।
तपाईं पनि यो फाइल नाम भन्दा पहिले नोटिस गर्नेछौं, हामीले केही अतिरिक्त जानकारी थप्यौं, "/ छविहरू /"। यो फाइल मार्ग हो। प्रारम्भिक फर्वार्ड स्ल्याशले सर्वरलाई डाइरेक्टरीको मूलमा हेर्नको लागि बताउँछ। त्यसपछि त्यसपछि "छवि" नामक फोल्डरको खोजी गर्नेछ र अन्तमा फाइल "logo.png" भनिन्छ। सबै साइटको ग्राफिक्स भण्डारण गर्नको लागी "छवि" नामक फोल्डर प्रयोग गर्नु एकदम साधारण अभ्यास हो, तर तपाईको फाइल मार्ग परिवर्तन हुनेछ जुन तपाईंको साइटको लागि उपयुक्त छ।
दोस्रो आवश्यक विशेषता "alt" पाठ हो। यो "वैकल्पिक पाठ" हो जुन छविले केही कारणको लागि लोड गर्न असफल भयो। यो पाठ, जुन हाम्रो उदाहरणमा "कम्पनी लोगो" पढ्ने छ भने छवि लोड गर्न विफल भएमा प्रदर्शित हुनेछ। यो किन हुन्छ? विभिन्न कारणहरू:
- गलत फाइल मार्ग
- गलत फाइल नाम वा मिसनलिङ
- ट्राफिकेशन त्रुटि
- सर्भरबाट फाइल मेटाइएको थियो
यी निर्दिष्ट छविहरू हराएको हुनका लागि यी केही मात्र हो। यी घटनाहरूमा, हाम्रो alt पाठ बरु प्रदर्शन हुनेछ।
Alt पाठ पनि स्क्रिन पढ्ने सफ्टवेयरद्वारा प्रयोग गरिएको छ जुन आगन्तुकलाई छवि "पढ्न" पढ्न को लागी दृश्य देखाइन्छ। चूंकि तिनीहरूले हामी जस्तै छवि देख्न सक्दैनन्, यो पाठलाई उनीहरूलाई छवि कुन हो भनेर थाहा पाउन दिन्छ। यसैले alt पाठ आवश्यक छ र किन यो स्पष्ट रूपमा बताउन छवि को हो?
Alt पाठ को एक सामान्य गलतफहमी यो यो खोज इन्जिन प्रयोजनको लागि हो। यो सही छैन। Google र अन्य खोज इञ्जिनले यो टेक्स्ट पढ्नका लागि यो पाठ पढ्नको लागी छवि (के होईन, उनीहरूले "तपाईंको छवि या" देख्न सक्दैन ") को लागी पढ्न को लागी, तपाईले केवल एकदम खोज इन्जिनमा अपील गर्नको लागी alt पाठ लेख्न सक्नुहुन्न। लेखक स्पष्ट alt पाठ जुन मानिसको लागि हो। यदि तपाइँ केही कुञ्जीहरू पनि ट्यागमा खोज इन्जिनमा अपील गर्न सक्नुहुनेछ, त्यो ठीक छ, तर सँधै सुनिश्चित गर्नुहोस् कि alt पाठ यसको प्राथमिक प्रयोजन सेवा गर्दैछ भन्ने कुराले बताउँछ कि छवि ग्राफिक्स फाइल देख्न सक्ने व्यक्तिको लागि के हो।
अन्य विशेषताहरू
आईएमएम ट्यागमा दुई अन्य गुणहरू छन् जुन तपाईंले आफ्नो वेब पृष्ठमा ग्राफिक राख्दा प्रयोगमा देख्न सक्नुहुन्छ - चौडाई र उचाइ। उदाहरणका लागि, यदि तपाइँ WYSIWYG सम्पादक प्रयोग गर्नुहोस् जस्तै Dreamweaver, यसले स्वचालित रूपमा यो जानकारी थप्दछ। यहाँ एउटा उदाहरण हो:
WIDTH र HEIGHT विशेषताहरू ब्राउजर आकारको आकारलाई बताउँछन्। त्यसपछि ब्राउजरले थाहा पाएको छ कि कितना ठाउँ लेआउट को आवंटित गर्न को लागी, र छवि डाउनलोड डाउनलोड गर्दा यो अर्को पृष्ठ मा अगाडी बढन सक्छ। तपाईंको HTML मा यो जानकारी प्रयोग गर्ने समस्या यो हो कि तपाई सधैँ तपाइँको छविलाई सही साइजमा प्रदर्शन गर्न चाहनुहुन्न। उदाहरणको लागि, यदि तपाइँसँग एक उत्तरदायी वेबसाइट छ जसको साइजिंग दर्शकहरू स्क्रिन र यन्त्र साइजमा आधारित हुन्छन्, तपाइँ पनि तपाइँका तस्बिरहरू लचीला हुन चाहन्छन्। यदि तपाइँ आफ्नो एचटीएमएलमा बताउनुहुन्छ कि निश्चित साइज भनेको हो, तपाईले उत्तरदायी CSS सञ्जाल प्रश्नहरूसँग ओवरराइड गर्न निकै कठिन पाउनुहुनेछ। यस कारणको लागि, र शैली (सीएसएस) र ढाँचा (HTML) को विभाजन कायम राख्न, यो सिफारिस गरिएको छ कि तपाईं चौडाई र उचाइ विशेषताहरू तपाइँको एचटीएमएल कोडमा थप्नु भएको छैन।
एक नोट: यदि तपाइँ यी साइजिंग निर्देशनहरू बन्द गर्नुहुन्छ र सीएसएसमा साइज निर्दिष्ट नगर्नुहोला, ब्राउजर ले छविलाई पूर्वनिर्धारित, मौलिक आकारमा देखाउनेछ।
जेरेमी Girard द्वारा संपादित