तस्बिरहरू र वस्तुहरूका लागि HTML IMG ट्यागको प्रयोग गर्नुहोस्
HTML IMG ट्यागले वेब पृष्ठ भित्र तस्वीरहरु र अन्य स्थिर ग्राफिक वस्तुहरूको सम्मिलनलाई नियन्त्रण गर्दछ। यो साधारण ट्यागले धेरै अनिवार्य र वैकल्पिक विशेषताहरू समर्थन गर्दछ जसले एक आकर्षक, छवि-केंद्रित वेबसाइट डिजाइन गर्न सक्ने क्षमतालाई जोड दिन्छ।
पूर्ण रूपमा स्थापित एचटीएमटीएमएमएम ट्याग ट्यागको एउटा उदाहरण यो जस्तो देखिन्छ:
आवश्यक आईएमएम ट्याग विशेषताहरू
एसआरसी। वेब पेजमा प्रदर्शन गर्न छवि प्राप्त गर्न केवल एक विशेषता तपाईं एसआरसी विशेषता हो। यो विशेषताले छवि फाइलको नाम र स्थानलाई प्रदर्शन गर्न पहिचान गर्दछ।
ALT। मान्य XHTML र HTML4 लेख्न, ALT विशेषता पनि आवश्यक छ। यो विशेषता प्रयोग गरी पाठको साथ अल्पसंख्यक ब्राउजर प्रदान गर्न प्रयोग गरिन्छ। ब्राउजरले वैकल्पिक पाठलाई विभिन्न तरिकामा प्रदर्शन गर्दछ। केहि यसलाई पप अपको रूपमा प्रदर्शन गर्दछ जब तपाईं छविमा आफ्नो माउस राख्नुहुन्छ, अरूले यो गुणमा प्रदर्शन गर्दा छविमा राइट-क्लिक गर्नुहुन्छ, र केहि यसलाई सबै प्रदर्शन गर्दैन।
वेब पेजको पाठ प्रासंगिक वा महत्त्वपूर्ण नभएको छविको बारेमा अतिरिक्त विवरण दिनको लागि alt पाठ प्रयोग गर्नुहोस्। तर याद गर्नुहोस् कि स्क्रिन पाठकहरू र अन्य पाठ-मात्र ब्राउजरहरूमा, पाठ पृष्ठको बाँकी पाठ पृष्ठमा पढ्न सक्नेछ। भ्रमबाट बच्न, वर्णनात्मक Alt पाठ प्रयोग गर्नुहोस् (उदाहरणका लागि), "लोगो।" को सट्टा "वेब डिजाइन र HTML को बारेमा"।
एचटीएमएल 5 मा, ALT विशेषता सँधै आवश्यक छैन, किनभने तपाइँ यसलाई थप विवरण थप गर्न क्याप्शन प्रयोग गर्न सक्नुहुन्छ। तपाईं विशेषता ARIA-DESCRIBEDBY को पूर्ण वर्णन समावेश भएको आईडी को प्रयोग गर्न पनि प्रयोग गर्न सक्नुहुन्छ।
यदि छवि विशुद्ध सजावटी हो भने Alt पाठ पनि आवश्यक छैन, जस्तै वेब पेज वा प्रतिमाको शीर्षमा ग्राफिक। तर यदि तपाईं निश्चित हुनुहुन्न भने, केवल मामलामा alt पाठ समावेश गर्नुहोस्।
सिफारिस गरिएको IMG विशेषताहरू
WIDTH र HEIGHT । तपाईंले सधैंको लागि WIDTH र HEIGHT विशेषताहरू प्रयोग गर्ने आदतमा पुग्नुपर्दछ। र तपाइँ सधैँ वास्तविक आकार प्रयोग गर्नुपर्दछ र ब्राउजको साथ तपाईका तस्बिरहरू आकार नदिनुहोस्।
यी गुणहरूले पृष्ठको प्रतिपादनमा गति बढाउँछ किनभने ब्राउजर छविको लागि डिजाइनमा ठाउँ आवतित गर्न सक्दछ, र त्यसपछि सम्पूर्ण छवि डाउनलोड गर्न पर्खनुको सट्टा सामग्रीको बाँकी डाउनलोड गर्न जारी राख्दछ।
अन्य उपयोगी IMG विशेषताहरू
TITLE । विशेषता एक वैश्विक विशेषता हो जुन कुनै HTML तत्वमा लागू गर्न सकिन्छ। यसबाहेक, TITLE विशेषताले तपाईंलाई छविको बारेमा थप जानकारी थप्न दिन्छ।
अधिकांश ब्राउजरले TITLE विशेषतालाई समर्थन गर्दछ, तर तिनीहरू यो फरक तरिकामा गर्छन्। केहि पाठलाई पप अपको रूपमा प्रस्तुत गर्दछ जबकि अरूले यसलाई सूचना स्क्रिनमा प्रदर्शन गर्दा प्रयोगकर्तामा छवि दायाँ-क्लिक गर्दछ। तपाईं छविको बारेमा थप जानकारी लेख्न TITLE विशेषता प्रयोग गर्न सक्नुहुन्छ, तर यस जानकारीमा लुकेका वा दृश्यात्मक रूपमा गणना नगर्नुहोस्। तपाईले प्रायः यो प्रयोग गर्नु हुँदैन कि खोजी इन्जिनको लागि खोजशब्दहरू लुकाउन। यो अभ्यास अब धेरै खोजी इन्जिन द्वारा दण्डित गरिएको छ।
USEMAP र ISMAP । यी दुई विशेषताहरू तपाईंको छविहरूमा क्लाइन्ट-साइड () र सर्भर-साइड (आईएसएमएपी) छवि नक्सा सेट गर्दछ।
LONGDESC । विशेषताले छविको लामो विवरणमा यूआरएलहरूलाई समर्थन गर्दछ। यो सुविधाले तपाईँका तस्बिरहरू थप पहुँचयोग्य बनाउँछ।
अव्यवस्थित र अपमानजनक आईएमएम विशेषताहरू
धेरै विशेषताहरू अहिले HTML5 मा अप्रचलित छन् वा एचटीएमएल 4 मा घटाइएको छ। उत्तम HTML को लागी, तपाइँ यी गुणहरू प्रयोग गर्नुको सट्टा अन्य समाधानहरू खोज्नुपर्छ।
बर्डर । विशेषता चित्रको वरिपरि कुनै सीमाको पिक्सेलमा चौडाइ परिभाषित गर्दछ। यसलाई HTML4 मा CSS को पक्षमा बिच्छेद गरिएको छ र HTML5 मा अप्रचलित छ।
ALIGN । यो विशेषताले तपाईंलाई पाठ भित्र छवि राख्न र यसको वरिपरि पाठ प्रवाहको अनुमति दिन्छ। तपाईं एक छवि दाहिया वा बायाँ तिर पङ्क्तिबद्ध गर्न सक्नुहुनेछ। यो HTML4 मा फ्लोट CSS गुणको पक्षमा बिच्छेद गरिएको छ र HTML5 मा अप्रचलित छ।
HSPACE र VSPACE । HSPACE र VSPACE विशेषताहरू सेतो स्थान तेर्सो रूपमा (HSPACE) र ठाडो (VSPACE) थप गर्दछ। व्हाइट स्पेस ग्राफिक (माथि र तल वा बायाँ र दाँया) को दुवै पक्षहरूमा थपिनेछ, त्यसैले यदि तपाईलाई केवल एकै ठाउँमा ठाउँ चाहिन्छ, तपाईले CSS प्रयोग गर्नुपर्छ। यी विशेषताहरू HTML4 मा मार्जिन CSS गुणको पक्षमा बिच्छेद गरिएका छन्, र तिनीहरू HTML5 मा अप्रचलित छन्।
LOWSRC । LOWSRC विशेषताले वैकल्पिक तस्बिर प्रदान गर्दछ जब तपाईंको छवि स्रोत धेरै ठूलो छ जुन यसले धेरै छिटो डाउनलोड गर्दछ। उदाहरणका लागि, तपाईसँग हुन सक्नुहुनेछ 500 किबीको छवि हो जुन तपाईले तपाइँको वेब पेजमा प्रदर्शन गर्न चाहानुहुन्छ, तर 500 केबीबीले डाउनलोड गर्न लामो समय लिन सक्दछ। त्यसैले तपाई छविको एक सानो सानो प्रतिलिपि बनाउनुहोस्, सम्भवतः कालो र सेतोमा वा केवल अत्यन्त अनुकूलित हुन्छ, र राख्नुहोस् कि LOWSRC विशेषतामा। सानो छविले डाउनलोड गर्नेछ र प्रदर्शन गर्नेछ, र तब जब ठूलो छवि देखा पर्दछ यसले कम स्रोत स्रोतलाई प्रतिस्थापन गर्नेछ।
आईएमएस ट्यागमा LOWSRC विशेषता नेटस्केप नेभिगेटर 2.0 मा थपिएको थियो। यो DOM स्तर 1 को भाग हो तर त्यस पछि DOM स्तरबाट हटाईयो। ब्राउजर समर्थन यस विशेषताको लागि स्केच गरिएको छ, यद्यपि धेरै साइटहरूले यो सबै आधुनिक ब्राउजरद्वारा समर्थित छ भन्ने दावी गर्छन्। यसलाई HTML4 वा HTML5 मा अप्रचलित रूपमा बिच्छेद गरिएको छैन किनकी यो कुनै पनि विवरणको आधिकारिक भाग कहिल्यै थिएन।
यो विशेषता प्रयोग गर्न नदिनुहोस् र यसको सट्टा तपाईंको छविहरू अनुकूलन गर्नुहोस् ताकि तिनीहरू चाँडो लोड गर्नुहोस्। पृष्ठ लोडको गति राम्रो वेब डिजाइनको एक महत्वपूर्ण भाग हो, र ठूला तस्बिरहरू ढिलो पृष्ठहरू निकै कम हुन्छन् - भले पनि तपाई LOWSRC विशेषता प्रयोग गर्नुहुन्छ।