HTML के साथ एक छवि जोड़ें

लेखक: Christy White
निर्माण की तारीख: 4 मई 2021
डेट अपडेट करें: 1 जुलाई 2024
Anonim
15: HTML और CSS का उपयोग करके इमेज कैसे डालें | एचटीएमएल और सीएसएस सीखें | एचटीएमएल ट्यूटोरियल | सीएसएस की मूल बातें
वीडियो: 15: HTML और CSS का उपयोग करके इमेज कैसे डालें | एचटीएमएल और सीएसएस सीखें | एचटीएमएल ट्यूटोरियल | सीएसएस की मूल बातें

विषय

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

कदम बढ़ाने के लिए

1 की विधि 1: HTML के साथ छवियाँ सम्मिलित करें

  1. अपनी छवि को मुफ्त होस्टिंग वेबसाइट पर अपलोड करें, जैसे कि फोटोबकेट या टाइनीपिक, जो हॉट लिंकिंग की अनुमति देता है। हॉट-लिंकिंग वेबसाइट सर्वर पर एक छवि के सीधे लिंक के लिए अनुमति देता है; कुछ प्रदाताओं ने इस पर प्रतिबंध लगा दिया है क्योंकि हॉट-लिंकिंग उनके बैंडविड्थ का उपयोग करता है और उनके सर्वर पर जगह लेता है।
    • यदि आपके पास एक भुगतान होस्टिंग खाता है, तो छवियों को सीधे उस सर्वर पर अपलोड करें जहां आपकी वेबसाइट रखी गई है। यह हमेशा एक मुफ्त साइट की तुलना में अधिक विश्वसनीय है और इसे बिल्कुल भी महंगा नहीं होना चाहिए।
  2. पाठ संपादक में एक नया दस्तावेज़ खोलें (उदा।, नोटपैड / नोटपैड) या अपनी वेबसाइट / प्रोफ़ाइल में पृष्ठ खोलें जहां आप सीधे HTML कोड बदल सकते हैं।
  3. से शुरू करें आईएमजी टैग। आईएमजी टैग खाली है, जिसका अर्थ है कि कोई समापन टैग की आवश्यकता नहीं है। हालाँकि, XHTML सत्यापन के लिए आप अभी भी इसके सामने एक स्थान और एक स्लैश रख सकते हैं से अधिक संकेत।
    • img />
  4. कई उपलब्ध विशेषताएं हैं, लेकिन केवल एक ही आवश्यक है:src। वह स्थान / पता, या आपकी छवि का URL भी है।
    • img src = "छवि का URL" />
  5. इसके बाद आपको करना होगा कुल मिलाकर विशेषता जोड़ें। छवि को लोड करने में विफल होने पर यह एक वैकल्पिक पाठ दिखाता है। यह नेत्रहीनों के लिए भी एक सेवा है जो स्क्रीन रीडर का उपयोग करता है।
    • यदि आप किसी छवि पर कर्सर घुमाते हैं, तो यह पाठ टूलटिप के रूप में भी दिखाया जाता है, लेकिन इंटरनेट एक्सप्लोरर में केवल यही मामला है। समाधान जो सभी ब्राउज़रों (फ़ायरफ़ॉक्स) के साथ काम करता है और अन्य।) को है शीर्षक के अलावा उपयोग करने के लिए विशेषता कुल मिलाकर। (आप बाद को छोड़ सकते हैं यदि आप नहीं चाहते कि छवि टूलटिप हो।)

उदहारण के लिए:img src = "URL ऑफ़ इमेज" alt = "जस्ट इन केस" शीर्षक = "टूलटिप" />


  1. अब आप छवि के आकार को इंगित कर सकते हैं ऊंचाई तथा चौड़ाई पिक्सल या एक प्रतिशत निर्दिष्ट करके विशेषता, और। ध्यान दें कि इस तरह से आकार बदलना केवल दृश्य का आकार बदलता है, न कि छवि का आकार। छवि के लोडिंग समय को छोटा करने के लिए, विशेष रूप से बड़ी छवियों के साथ, फोटो एडिटिंग सॉफ़्टवेयर के साथ अग्रिम रूप से या PicResize.com जैसी ऑनलाइन सेवा के साथ उनका आकार बदलना बेहतर है।
    • img src = "छवि का URL" alt = "बस के मामले में" शीर्षक = "टूलटिप" ऊंचाई = "50%" चौड़ाई = "50%" />
    • img src = "छवि का URL" alt = "केवल मामले में" शीर्षक = "टूलटिप" ऊंचाई = "25px" चौड़ाई = "50px" />

टिप्स

  • इन विशेषताओं का मान या तो पिक्सेल में दिया जाता है, या प्रतिशत के रूप में 1-100% से दिया जाता है।
  • छवि को वेब पेज पर कहीं भी रखा जा सकता है, ऊपर, नीचे, मध्य, दाएं, बाएं आदि विभिन्न स्वरूपण विशेषताओं का उपयोग करके।
  • Hspace विशेषता का उपयोग किसी छवि के बाईं और दाईं ओर क्षैतिज स्थान डालने के लिए किया जाता है, जबकि Vspace विशेषता का उपयोग छवियों और अन्य वस्तुओं के ऊपर और नीचे के कमरे को बनाने के लिए किया जाता है।
  • छवियों के साथ बहुत ज्यादा लिप्त न हों। जो गन्दा और अव्यवसायिक लगता है।
  • जीआईएफ छवियां लोगो या कार्टून के लिए ठीक हैं, लेकिन यह फ़ाइल प्रकार कई रंगों के साथ फ़ोटो और अन्य छवियों के लिए कम उपयुक्त है।
    • जीआईएफ छवियां केवल 8-बिट रंग का समर्थन करती हैं, जिसमें एक छवि के लिए अधिकतम 256 रंग होते हैं। इसलिए यह उम्मीद की जानी चाहिए कि 16 या 24 बिट रंग चित्रण या फोटो का प्रजनन उतना अच्छा नहीं होगा।
    • जीआईएफ छवियां पारदर्शिता का भी समर्थन करती हैं। पारदर्शिता का एक सा संभव है, जिसका अर्थ है कि एक रंग को पारदर्शी बनाया जा सकता है।
    • Interlacing भी GIF छवियों द्वारा समर्थित है जिसका अर्थ है कि साइट आगंतुक को इस बात का अंदाजा होगा कि पूरी तरह से लोड होने से पहले छवि कैसी दिखेगी।
    • GIF प्रारूप भी एनीमेशन का समर्थन करता है।
  • सुनिश्चित करें कि URL छवि के फ़ाइल प्रारूप (.webp .gif आदि) को बताता है।

चेतावनी

  • हॉटलिंक मत करो!