HTML छवियाँ
जबकि पाठ एक वेबसाइट की सामग्री के सबसे कर देगा, कभी कभी छवियों को एक हजार शब्दों से ज्यादा या साइट डिजाइन के लिए कि अतिरिक्त मसाला जोड़ने कह सकते हैं. शुक्र है यह बहुत HTML में छवियों को लागू करने में आसान है.
छवि टैग
एक HTML दस्तावेज़ आप छवि टैग का उपयोग कर सकते में छवियों को लोड <img src="..." width="" height="" alt="..." /> . ध्यान दें कि यह एक आत्म टैग बंद इतनी जगह नहीं भूल करते हैं और अंत में स्लेश है. HTML के href गुण के लिए इसी प्रकार के एसआरसी विशेषता (स्रोत) एक छवि फ़ाइल के लिए पूर्ण या रिश्तेदार का पता धारण लिंक.
वैकल्पिक चौड़ाई और ऊंचाई पिक्सल में चित्र का आकार निर्धारित गुण और एक बड़े या छोटे मूल्य के लिए छवि या स्रोत के रूप में सटीक एक ही मूल्यों को निर्धारित कर सकते हैं के लिए छवि पैमाने पर हो. हालांकि ये गुण आवश्यक तुम हमेशा के लिए उनका इस्तेमाल करने की कोशिश करना चाहिए, अन्यथा वेब ब्राउज़र में छवि आकार की गणना करते समय पृष्ठ जो सामग्री के चारों ओर छलांग का कारण बन सकती लोड होगा नहीं हैं.
Alt विशेषता (वैकल्पिक पाठ) छवि सामग्री का वर्णन करता है और मामले में प्रदर्शित छवि लोड नहीं है. ध्यान दें कि हर Alt छवि टैग के लिए आवश्यक है में आदेश को वैध XHTML 1.0 कड़ी है. यदि आप एक Alt पाठ आप बस रख सकते हैं प्रदान करने की इच्छा नहीं है alt="" . यदि संभव हो तो आप हमेशा एक छवि विवरण उपलब्ध कराने के रूप में यह स्क्रीन पाठकों या Google जैसे खोज इंजन का उपयोग करने पता है कि आपकी छवि के बारे में है विकलांग लोगों की मदद करेंगे चाहिए.
HTML छवि
उत्पादन
छवि लिंक
अगले पाठ लिंक आप भी छवि लिंक या दोनों का मिश्रण का प्रयोग कर सकते हैं के लिए.
HTML छवि लिंक
<a href="/">This link starts here <img src="/files/media/logo_text.png" alt="Web design tutorials" /> and ends here.</a>
उत्पादन
छवि प्रारूप
हालांकि यह एक बेहतर वेब ट्यूटोरियल ग्राफिक्स के लिए विस्तार से अनुकूल है, यह हमेशा के लिए छवि प्रारूपों के विभिन्न प्रकार आप उपयोग कर सकते हैं पता है अच्छा है. अधिकतर ब्राउज़रों में निम्नलिखित 3 छवि प्रकार समर्थन करते हैं:
GIF
GIFs ज्यादा से ज्यादा 256 रंग होते हैं (यह भी एक रंग पैलेट कहा जाता है) सभी रंग के लाखों आप कर सकते हैं प्रदर्शन कंप्यूटर से बाहर कर सकते हैं. वे सबसे अच्छी गैर के लिए इस्तेमाल कर रहे हैं जैसे बटन, चित्र और लोगो के रूप में यथार्थवादी ग्राफिक्स.
केवल सीमित रंग होने इन छवि फ़ाइलें फ़ाइल आकार में अपेक्षाकृत छोटे जो हमेशा एक अच्छी बात यह है बनाता है. यह भी पारदर्शी पिक्सेल निर्दिष्ट संभव है, जिसका अर्थ है कि बजाय एक रंग के माध्यम से कुछ भी नहीं दिखाई दे पृष्ठभूमि तैयार हो जाएगा.
उन्होंने यह भी फ्रेम GIF एकाधिक भंडारण और उन्हें खेलने वापस एक दृश्य के रूप में द्वारा एनीमेशन समर्थन करते हैं. यह व्यापक रूप से अब और नहीं के रूप में इस्तेमाल किया है, हालांकि, अब है कि फ़्लैश काफी मुख्यधारा की है.
JPEG
समर्थन JPEGs 16.7 million रंग और इस तरह सर्वश्रेष्ठ यथार्थवादी तस्वीर के लिए उपयुक्त हैं. छवि गुणवत्ता बहुत से बहुत संपीड़न सेटिंग्स के आधार पर गरीबों को रेंज कर सकते हैं. बड़ी फ़ाइलों के रूप में फ़ाइल आकार और गुणवत्ता के बीच एक संतुलन की कोशिश करो अपनी वेबसाइट के कारण धीरे लोड होगा.
PNG
PNGs वेब डिजाइन परिदृश्य में कुछ नए प्रारूप रहे हैं और GIFs जगह सोचा (यदि अच्छी तरह से संकुचित, एक palettized PNG GIF हमेशा अपने समकक्ष से फ़ाइल आकार में छोटा होना चाहिए) कर रहे हैं. वे GIFs JPEGs तरह के रूप में अच्छी तरह के रूप में 16.7 million रंग की तरह रंग पट्टियाँ समर्थन है, हालांकि JPEGs के विपरीत, PNGs दोषरहित संपीड़न जो मूल छवि गुणवत्ता को बरकरार रखे हुए 100% का उपयोग करें.
शायद सबसे दिलचस्प सुविधा अल्फा पारदर्शिता के लिए अपना समर्थन है. प्रत्येक पिक्सेल अपनी (GIFs के विपरीत% 0-100, जहां एक पिक्सेल या तो पारदर्शी या अपारदर्शी) ऐसे विरोधी के रूप में रोचक प्रभाव के लिए अनुमति किसी भी पृष्ठभूमि रंग के खिलाफ (चिकनी सीमाओं अलियासिंग से लेकर पारदर्शिता हो सकते हैं). यह सभी आधुनिक ब्राउज़रों में समर्थित है (फ़ायरफ़ॉक्स, ओपेरा, सफारी, IE7). दुर्भाग्य से IE6 natively अल्फा पारदर्शिता नहीं पहचान करता है, हालांकि कुछ स्वीकार्य workarounds मौजूद हैं.