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