HTML के साथ चित्र सम्मिलित करें - यह कैसे काम करता है
यदि आप HTML के साथ अपनी वेबसाइट पर कोई चित्र सम्मिलित करना चाहते हैं, तो img टैग का उपयोग करें। यहां पढ़ें कि यह वास्तव में कैसे काम करता है और आपको क्या देखना है।
HTML के साथ चित्र कैसे डालें - मूल बातें
- दिन के साथ
चित्र सम्मिलित कर सकते हैं। - टैग के भीतर छवि स्रोत दिया गया है:
वेबसाइट पर सबफ़ोल्डर "चित्रों" से फ़ाइल "testbild.webp" सम्मिलित करता है। - URL के माध्यम से बाहरी स्रोत भी संभव हैं:
हमारे सर्वर से CHIP लोगो को एकीकृत करता है।
HTML एम्बेडेड छवियों के लिए विशेषताएँ
Img टैग के भीतर कई विशेषताएं जोड़ी जा सकती हैं:
- वेबसाइट पर छवि का आकार निर्धारित करने के लिए "चौड़ाई" और "ऊंचाई" का उपयोग करें: छवि
100 पिक्सेल की लंबाई के साथ वर्ग प्रदर्शित होता है। - "Alt" के साथ आप एक वैकल्पिक पाठ को परिभाषित करते हैं जो प्रदर्शित होता है यदि संबंधित छवि लोड नहीं की जा सकती है। HTML के साथ चित्र सम्मिलित करते समय आपको हमेशा यह विशेषता सेट करनी चाहिए।
- "सीमा" विशेषता पिक्सेल में फ्रेम की मोटाई को निर्दिष्ट करती है। के साथ एक तस्वीर
एक फ्रेम है जो पांच पिक्सेल के साथ अपेक्षाकृत मोटी है। - ग्राफिक संरेखित करने के लिए "संरेखित करें" का उपयोग करें। इस विशेषता के मान "नीचे", "शीर्ष", "मध्य", "बाएं", "सही" और "केंद्र" हैं।
- "Hspace" और "vspace" के साथ आप (क्षैतिज और लंबवत) छवि के लिए दूरी निर्धारित कर सकते हैं।
मुझे किस प्रारूप का उपयोग करना चाहिए?
विभिन्न छवि प्रारूप हैं जिन्हें आप HTML कोड में शामिल कर सकते हैं।
- JPG: JPG प्रारूप छवियों का उपयोग आमतौर पर वेब पृष्ठों के लिए किया जाता है। यह प्रारूप 16.7 मिलियन रंगों का प्रतिनिधित्व करता है। इसके अलावा, एक JPG को बहुत अच्छी तरह से संपीड़ित किया जा सकता है। इसलिए छवि फ़ाइल को बहुत छोटा बनाया जा सकता है, जो एक तेज़ लोडिंग समय को सक्षम करता है।
- पीएनजी: पीएनजी प्रारूप 16.7 मिलियन रंगों को भी प्रदर्शित कर सकता है और संकुचित किया जा सकता है। जेपीजी प्रारूप पर लाभ यह है कि नुकसान के बिना संपीड़न संभव है।
- पीएनजी प्रारूप में परिभाषित क्षेत्रों को पारदर्शी रूप से प्रदर्शित किया जा सकता है। हालांकि, बहुत पुराने ब्राउज़रों में पारदर्शिता प्रदर्शित करने में समस्याएं हैं।
- GIF: यदि आप HTML के साथ चलती तस्वीरें सम्मिलित करना चाहते हैं, तो GIF प्रारूप उपयुक्त है। इस प्रारूप में केवल 256 रंगों को दिखाया गया है और किसी भी सेटिंग विकल्प के बिना संपीड़न स्वचालित रूप से होता है।
- जीआईएफ प्रारूप छोटे, एनिमेटेड ग्राफिक्स या लोगो के लिए सबसे उपयुक्त है। यह सुनिश्चित करने के लिए कि लोगो एक पृष्ठ में सामंजस्यपूर्ण रूप से फिट हैं, PNG की तरह GIF प्रारूप में पारदर्शिता का उपयोग किया जा सकता है।
एचटीएमएल उदाहरण
- यह हमारी वेबसाइट से CHIP लोगो को एकीकृत करता है।
- इसे 100 पिक्सेल की ऊँचाई और 200 पिक्सेल की चौड़ाई के साथ प्रदर्शित किया जाता है।
- यदि इसे लोड नहीं किया जा सकता है, तो "CHIP-Logo" को रिक्त पाठ के रूप में प्रदर्शित किया जाता है।
- तस्वीर को दो-पिक्सेल फ्रेम द्वारा तैयार किया गया है।
- यह सही-संरेखित है और अन्य साइड तत्वों के अलावा 50 पिक्सेल है।