उपयोगी टिप्स

HTML में इमेज को कैसे एम्बेड करें

Pin
Send
Share
Send
Send


प्रश्न का उत्तर देने से पहले “HTML में चित्र कैसे डालें? ", यह ध्यान दिया जाना चाहिए कि भारी मात्रा में ग्राफिक सामग्री के साथ वेब पृष्ठों को लोड करना इसके लायक नहीं है, क्योंकि इससे न केवल संसाधन की उपयोगकर्ता की दृश्य धारणा में सुधार होगा, बल्कि पेज लोड समय भी बढ़ेगा।

वेबसाइट बनाते समय, वे अक्सर पीएनजी, जीआईएफ, और जेपीईजी छवि प्रारूपों का उपयोग करते हैं, और छवियों के साथ डिजाइन के काम के लिए, एडोब फोटोशॉप ग्राफिक एडिटर का उपयोग करते हैं, जिसमें गुणवत्ता खोने के बिना छवियों को संपीड़ित और आकार देने की समृद्ध क्षमता होती है, जो वेब विकास के लिए अविश्वसनीय रूप से महत्वपूर्ण है।

HTML में इमेज को कैसे एम्बेड करें?

HTML पेज में एक छवि डालने के लिए, एक एकल सरल टैग का उपयोग किया जाता है:

जहां xxx छवि पता है। इस घटना में कि चित्र पृष्ठ के समान निर्देशिका में है, टैग जैसा दिखेगा:

हालांकि, उच्च गति और स्थिर इंटरनेट का उपयोग अभी तक दुनिया के सभी कोनों तक नहीं पहुंचा है, और ऐसा होता है कि वेबसाइट पर छवि बस लोड नहीं करती है। ऐसे मामलों के लिए, वैकल्पिक पाठ की अवधारणा है।

यह चित्र की साइट पर इसकी दुर्गमता, लोडिंग के समय, या ब्राउज़र मोड में "बिना चित्रों के" दिखाया जाता है। यह टैग की पूरी विशेषता का उपयोग करके जोड़ा जाता है।

एक छवि फ़ाइल में वैकल्पिक पाठ जोड़ने का एक उदाहरण:

HTML छवि आकार

छवि फ़ाइल का प्रदर्शन आकार बदलने के लिए, ऊँचाई और चौड़ाई टैग का उपयोग करें, जहाँ ऊँचाई ऊँचाई और चौड़ाई चौड़ाई है, जिसे पिक्सेल में मापा जाता है।

इन विशेषताओं का उपयोग करते समय, ब्राउज़र पहले ग्राफिक सामग्री के लिए जगह आवंटित करता है, एक सामान्य पृष्ठ लेआउट तैयार करता है, पाठ प्रदर्शित करता है, और फिर चित्र को लोड करता है।

चित्र को दिए गए आकारों के साथ एक आयत में रखा गया है, और इस घटना में कि पैरामीटर मूल से छोटे या बड़े हैं, चित्र खींच या संकुचित है।

यदि ऊंचाई और चौड़ाई विशेषताओं का उपयोग नहीं किया जाता है, तो ब्राउज़र पाठ और अन्य पृष्ठ तत्वों के प्रदर्शन में देरी करते हुए, छवि को तुरंत लोड करता है।

इन मापदंडों को दोनों पिक्सेल में निर्दिष्ट किया जा सकता है (छवि आकार स्थिर है और उपयोगकर्ता के स्क्रीन रिज़ॉल्यूशन पर निर्भर नहीं करता है), या प्रतिशत में (छवि आकार स्क्रीन रिज़ॉल्यूशन पर निर्भर करता है)।

यह याद रखना चाहिए कि उस समय जब आप छवि का मूल आकार बदलते हैं, तो आपको इसका अनुपात रखना चाहिए।

ऐसा करने के लिए, केवल मापदंडों (चौड़ाई या ऊंचाई) में से केवल एक का मूल्य निर्दिष्ट करें, और दूसरे के मूल्य की गणना स्वचालित रूप से की जाएगी।

HTML छवि लेआउट

कई HTML टैग्स के साथ,

छवि लिंक

HTML में, लिंक बनाने के लिए, टैग का उपयोग करें:

ग्राफिक लिंक सेट करने के लिए, आपको बस लिंक टैग के साथ छवि टैग को संयोजित करने की आवश्यकता है।

यह निम्नानुसार किया जाता है:

जैसा कि आप देख सकते हैं, ग्राफिक इंसर्ट एक लिंक हो सकता है और क्लिक करने पर पूर्ण या छोटे संस्करण में दर्ज किसी भी पते पर पुनर्निर्देशित हो सकता है।

मैं HTML में चित्र को पृष्ठभूमि कैसे बना सकता हूं?

छवि को न केवल पृष्ठ में एक दृश्यमान वस्तु के रूप में डाला जा सकता है, बल्कि एक पृष्ठभूमि के रूप में भी सेट किया जा सकता है। किसी चित्र को पृष्ठभूमि के रूप में परिभाषित करने के लिए, टैग में विशेषता पृष्ठभूमि = "xxx" को निर्दिष्ट करना आवश्यक है, जहां xxx चित्र का पता उसी तरह से निर्दिष्ट किया गया है जैसे ऊपर दिए गए उदाहरणों में।

एक उदाहरण के लिए, हम इस तरह की बनावट छवि को पृष्ठभूमि छवि के रूप में सेट करेंगे:

साइट के HTML पेज पर छवि डालने के लिए आवश्यक टैग और विशेषताओं के बारे में यह जानकारी समाप्त हो गई है।

HTML डॉक्यूमेंट में चित्र डालें

  • सामग्री:
  • 1. टैग
  • 1.1। छवि पता
  • 1.2। छवि आकार
  • 1.3। छवि फ़ाइल स्वरूप
  • 2. टैग
  • 3. टैग
  • 4. एक छवि मानचित्र बनाने का एक उदाहरण

एक तत्व एक छवि और इसकी कमबैक सामग्री का प्रतिनिधित्व करता है, जिसे पूरी विशेषता का उपयोग करके जोड़ा जाता है। चूंकि तत्व इनलाइन है, इसलिए इसे ब्लॉक तत्व के अंदर रखने की सिफारिश की जाती है, उदाहरण के लिए,

टैग में आवश्यक src विशेषता है, जिसका मूल्य छवि के लिए पूर्ण या सापेक्ष पथ है:

निम्नलिखित विशेषताएँ टैग के लिए उपलब्ध हैं:

तालिका 1. टैग विशेषताएँ
गुणविवरण, स्वीकृत मूल्य
altछवि के लिए वैकल्पिक विशेषता वैकल्पिक पाठ जोड़ता है। यह उस जगह पर प्रदर्शित किया जाता है जहां छवि डाउनलोड होने से पहले दिखाई देती थी या जब ग्राफिक को बंद कर दिया गया था, और यह टूलटिप के साथ भी प्रदर्शित होता है जब आप छवि पर होवर करते हैं।
सिंटैक्स: alt = "छवि विवरण"।
crossoriginक्रॉसोरिगिन विशेषता आपको कॉर्स अनुरोधों का उपयोग करके किसी अन्य डोमेन के संसाधनों से छवियां डाउनलोड करने की अनुमति देती है। कॉर्स अनुरोधों का उपयोग करके कैनवस पर अपलोड की गई छवियों का पुन: उपयोग किया जा सकता है। मान्य मान:
अनाम - क्रॉस-मूल अनुरोध HTTP हेडर का उपयोग करके किया जाता है, और कोई क्रेडेंशियल नहीं भेजा जाता है। यदि सर्वर उस सर्वर को क्रेडेंशियल प्रदान नहीं करता है जिससे सामग्री मांगी जाती है, तो छवि दूषित हो जाएगी और इसका उपयोग सीमित हो जाएगा।
उपयोग-क्रेडेंशियल्स - क्रॉस-ऑरिजिनल अनुरोध को क्रेडेंशियल्स के हस्तांतरण के साथ निष्पादित किया जाता है।
सिंटेक्स: क्रॉसोरिगिन = "अनाम"।
ऊंचाईऊंचाई विशेषता छवि की ऊंचाई निर्धारित करती है। पीएक्स या% में निर्दिष्ट किया जा सकता है।
सिंटेक्स: ऊंचाई: 300 पीएक्स।
ismapआइसमैप विशेषता इंगित करती है कि चित्र सर्वर पर स्थित एक मानचित्र छवि का हिस्सा है (छवि मानचित्र इंटरएक्टिव क्षेत्रों के साथ एक छवि है)। जब आप छवि-मानचित्र पर क्लिक करते हैं, तो निर्देशांक URL के एक स्ट्रिंग के रूप में सर्वर पर प्रेषित होते हैं। आइसमैप विशेषता को केवल तभी अनुमति दी जाती है यदि तत्व किसी मान्य href विशेषता वाले तत्व का वंशज हो।
सिंटेक्स: आइसमैप।
longdescविस्तारित छवि विवरण का URL जो पूरी विशेषता को पूरक करता है।
सिंटेक्स: longdesc = "http://www.example.com/description.txt"।
srcSrc विशेषता छवि के लिए पथ निर्दिष्ट करती है।
सिंटैक्स: src = "https://html5book.ru/images-in-html/flower.jpg"।
आकारडिस्प्ले सेटिंग्स के आधार पर इमेज साइज सेट करता है। केवल निर्दिष्ट srcset विशेषता के साथ काम करता है। विशेषता मान कॉमा द्वारा अलग की गई एक या एक से अधिक लाइनें हैं।
srcsetस्क्रीन रिज़ॉल्यूशन के आधार पर छवि के चयन के लिए स्रोतों की एक सूची बनाता है। इसका उपयोग एक साथ या src विशेषता के बजाय किया जा सकता है। विशेषता मान कॉमा द्वारा अलग की गई एक या एक से अधिक लाइनें हैं।

usemapUsemap विशेषता मानचित्र छवि के रूप में एक छवि को परिभाषित करती है। मान # चिह्न से शुरू होना चाहिए। मान टैग के नाम या आईडी विशेषता के मूल्य के साथ जुड़ा हुआ है और इसके बीच संबंध बनाता है और। यदि तत्व या तत्व का वंशज है तो एक विशेषता का उपयोग नहीं किया जा सकता है।
सिंटेक्स: usemap = "# mymap"।
चौड़ाई चौड़ाई विशेषता छवि की चौड़ाई निर्दिष्ट करती है। पीएक्स या% में निर्दिष्ट किया जा सकता है।
सिंटेक्स: चौड़ाई: 100%।

1.1। छवि पता

उदाहरण के लिए पूर्ण (पूर्ण URL) में छवि पता निर्दिष्ट किया जा सकता है:
url (http://anysite.ru/images/anyphoto.png)

या से रिश्तेदार पथ के माध्यम से दस्तावेज़ या रूट निर्देशिका साइट:
url (.. / चित्र / anyphoto.png) - दस्तावेज़ से संबंधित पथ,
url (/images/anyphoto.png) - रूट निर्देशिका से संबंधित पथ।

इसकी व्याख्या इस प्रकार है:
../ - का अर्थ है एक स्तर तक, रूट डायरेक्टरी में जाना,
छवियाँ / - छवियों के साथ फ़ोल्डर में जाएं,
anyphoto.png - एक छवि फ़ाइल को इंगित करता है।

1.3। छवि फ़ाइल स्वरूप

जेपीईजी प्रारूप(संयुक्त फोटोग्राफ विशेषज्ञ समूह)। JPEG चित्र तस्वीरों के लिए आदर्श हैं, इनमें लाखों अलग-अलग रंग हो सकते हैं। GIF से बेहतर छवियों को संपीड़ित करता है, लेकिन ठोस रंग के साथ पाठ और बड़े क्षेत्र दाग सकते हैं।

GIF प्रारूप(ग्राफिक्स इंटरचेंज फॉर्मेट)। छवियों को संपीड़ित करने के लिए आदर्श जिसमें ठोस रंग के साथ क्षेत्र हैं, जैसे कि लोगो। जीआईएफ फाइलें आपको रंगों में से एक को पारदर्शी बनाने की अनुमति देती हैं, ताकि वेब पेज की पृष्ठभूमि छवि के हिस्से के माध्यम से दिखाई दे सके। GIF में साधारण एनिमेशन भी शामिल हो सकते हैं। जीआईएफ छवियों में केवल 256 शेड्स होते हैं, यही वजह है कि पोस्टर की तरह छवियां रंग में धब्बा और अवास्तविक दिखती हैं।

पीएनजी प्रारूप(पोर्टेबल नेटवर्क ग्राफिक्स)। इसमें GIF और JPEG फॉर्मेट की बेहतरीन विशेषताएं शामिल हैं। इसमें 256 रंग शामिल हैं और GIF फ़ाइल की तुलना में छोटे आकार में चित्रों को संपीड़ित करते हुए रंगों में से एक को पारदर्शी बनाना संभव बनाता है।

APNG प्रारूप(एनिमेटेड पोर्टेबल नेटवर्क ग्राफिक्स)। पीएनजी आधारित छवि प्रारूप। आपको एनिमेशन संग्रहीत करने की अनुमति देता है, और पारदर्शिता का भी समर्थन करता है।

एसवीजी प्रारूप(स्केलेबल वेक्टर ग्राफिक्स)। एसवीजी ड्राइंग में एक्सएमएल प्रारूप में वर्णित ज्यामितीय आकृतियों का एक सेट होता है: रेखा, दीर्घवृत्त, बहुभुज, आदि। स्थिर और एनिमेटेड दोनों ग्राफिक्स का समर्थन किया जाता है। कार्यों के सेट में विभिन्न परिवर्तन, अल्फा मास्क, फिल्टर प्रभाव, टेम्पलेट्स का उपयोग करने की क्षमता शामिल है। एसवीजी छवियों को गुणवत्ता के नुकसान के बिना आकार दिया जा सकता है।

बीएमपी प्रारूप(बिटमैप चित्र)। यह एक असम्पीडित (मूल) रेखापुंज छवि है, जिसका टेम्पलेट पिक्सेल का एक आयताकार ग्रिड है। एक बिटमैप फ़ाइल में एक हेडर, एक पैलेट और ग्राफिक डेटा होता है। शीर्ष लेख ग्राफिक छवि और फ़ाइल (पिक्सेल गहराई, ऊंचाई, चौड़ाई और रंगों की संख्या) के बारे में जानकारी संग्रहीत करता है। पैलेट केवल उन बिटमैप फ़ाइलों में निर्दिष्ट किया जाता है जिसमें पैलेट चित्र (8 या उससे कम बिट्स) होते हैं और 256 से अधिक तत्वों से नहीं होते हैं। ग्राफिक डेटा चित्र का प्रतिनिधित्व करता है। इस प्रारूप में रंग की गहराई प्रति पिक्सेल 1, 2, 4, 8, 16, 24, 32, 48 बिट्स हो सकती है।

ICO प्रारूप(विंडोज आइकन)। Microsoft Windows में फ़ाइल आइकन संग्रहीत करने के लिए प्रारूप। इसके अलावा, इंटरनेट पर साइटों पर आइकन के रूप में विंडोज आइकन का उपयोग किया जाता है। यह इस प्रारूप की एक तस्वीर है जो ब्राउज़र में साइट पते या बुकमार्क के बगल में प्रदर्शित होती है। एक ICO फ़ाइल में एक या अधिक आइकन होते हैं, जिनमें से प्रत्येक का आकार और रंग अलग-अलग सेट होता है। आइकन का आकार कोई भी हो सकता है, लेकिन 16, 32 और 48 पिक्सेल के किनारों के साथ सबसे आम वर्ग आइकन हैं।

टैग का उपयोग सक्रिय क्षेत्रों के साथ नक्शे के रूप में एक ग्राफिक छवि का प्रतिनिधित्व करने के लिए किया जाता है। सक्रिय क्षेत्र हॉवर पर माउस कर्सर की उपस्थिति को बदलकर निर्धारित किए जाते हैं। सक्रिय क्षेत्रों पर क्लिक करके, उपयोगकर्ता संबंधित दस्तावेजों पर नेविगेट कर सकता है।

नाम विशेषता टैग के लिए उपलब्ध है, जो मानचित्र का नाम निर्धारित करता है। टैग के लिए नाम विशेषता का मान तत्व के usemap विशेषता में नाम से मेल खाना चाहिए:

तालिका 2. टैग विशेषताएँ
गुणसंक्षिप्त विवरण
altमानचित्र के सक्रिय क्षेत्र के लिए वैकल्पिक पाठ निर्दिष्ट करता है।
coordsस्क्रीन पर क्षेत्र की स्थिति निर्धारित करता है। निर्देशांक लंबाई की इकाइयों में निर्दिष्ट हैं और कॉमा द्वारा अलग किए गए हैं:
के लिए वृत्त - केंद्र के निर्देशांक और वृत्त की त्रिज्या,
के लिए आयत - ऊपरी बाएं और निचले दाएं कोने के निर्देशांक,
के लिए बहुभुज - वांछित क्रम में बहुभुज के कोने के निर्देशांक, यह आंकड़ा के तार्किक समापन के लिए पहले के बराबर अंतिम निर्देशांक को इंगित करने के लिए भी अनुशंसित है।
डाउनलोडयह href विशेषता को पूरक करता है और ब्राउज़र को बताता है कि संसाधन को लोड किया जाना चाहिए जब उपयोगकर्ता लिंक पर क्लिक करता है, उदाहरण के लिए, पहले इसे (एक पीडीएफ फाइल के रूप में) खोलना। किसी विशेषता के लिए एक नाम सेट करके, हम इस प्रकार ऑब्जेक्ट को लोड किए जाने का नाम देते हैं। इसकी कीमत निर्दिष्ट किए बिना एक विशेषता का उपयोग करने की अनुमति है।
hrefलिंक के लिए URL निर्दिष्ट करता है। लिंक का पूर्ण या सापेक्ष पता निर्दिष्ट किया जा सकता है।
hreflangलिंक किए गए वेब दस्तावेज़ की भाषा को परिभाषित करता है। केवल href विशेषता के साथ उपयोग किया जाता है। स्वीकृत मान - एक संक्षिप्त नाम जिसमें भाषा कोड को दर्शाते हुए पत्रों की एक जोड़ी होती है।
मीडियानिर्धारित करता है कि फ़ाइल किस प्रकार के उपकरणों के लिए अनुकूलित होगी। मान किसी भी मीडिया क्वेरी हो सकता है।
relवर्तमान और संबद्ध दस्तावेज़ के बीच संबंध के बारे में जानकारी के साथ href विशेषता का पूरक है। स्वीकृत मूल्य:
वैकल्पिक - दस्तावेज़ के वैकल्पिक संस्करण के लिए लिंक (उदाहरण के लिए, पृष्ठ, अनुवाद या दर्पण का मुद्रित रूप)।
लेखक - दस्तावेज़ के लेखक के लिए एक कड़ी।
बुकमार्क बुकमार्क के लिए उपयोग किया जाने वाला स्थायी URL है।
मदद - मदद के लिए लिंक।
लाइसेंस - इस वेब दस्तावेज़ के लिए कॉपीराइट जानकारी का लिंक।
अगला / प्रचलित - व्यक्तिगत URL के बीच संबंध को इंगित करता है। इस मार्कअप के लिए धन्यवाद, Google यह निर्धारित कर सकता है कि इन पृष्ठों की सामग्री तार्किक क्रम में जुड़ी हुई है।
nofollow - सर्च इंजन को इस पेज के लिंक या किसी विशिष्ट लिंक पर क्लिक करने से रोकता है।
noreferrer - इंगित करता है कि लिंक का अनुसरण करने के बाद ब्राउज़र को HTTP रिक्वेस्ट (Referrer) का हेडर नहीं भेजना चाहिए, जो इस बारे में जानकारी दर्ज करता है कि वेबसाइट विज़िटर किस पेज से आया है।
प्रीफ़ैच - इंगित करता है कि लक्ष्य दस्तावेज़ को कैश किया जाना चाहिए, अर्थात्। पृष्ठभूमि में ब्राउज़र पृष्ठ की सामग्री को अपने कैश में लोड करता है।
खोज - इंगित करता है कि लक्ष्य दस्तावेज़ में एक खोज उपकरण है।
टैग - वर्तमान दस्तावेज़ के लिए कीवर्ड को इंगित करता है।
आकारमानचित्र और इसके निर्देशांक पर सक्रिय क्षेत्र का आकार निर्धारित करता है। यह निम्नलिखित मान ले सकता है:
आयताकार - एक आयताकार आकार का सक्रिय क्षेत्र,
सर्कल - एक सर्कल के रूप में सक्रिय क्षेत्र,
पाली - बहुभुज के रूप में सक्रिय क्षेत्र,
डिफ़ॉल्ट - सक्रिय क्षेत्र पूरे छवि क्षेत्र पर कब्जा कर लेता है।
लक्ष्यलिंक के बाद दस्तावेज़ को अपलोड किया जाएगा, जहां इंगित करता है। यह निम्न मान लेता है:
_self - वर्तमान विंडो में पेज लोड होता है,
_blank - पृष्ठ एक नई ब्राउज़र विंडो में खुलता है,
_परेंट - पृष्ठ को मूल फ़्रेम में लोड किया गया है,
_top - पेज एक पूर्ण ब्राउज़र विंडो में लोड होता है।
टाइपMIME प्रकार की लिंक फ़ाइलों को इंगित करता है, अर्थात फ़ाइल एक्सटेंशन।

4. एक छवि मानचित्र बनाने का एक उदाहरण

1) वांछित आकार के सक्रिय क्षेत्रों में स्रोत छवि को चिह्नित करें। क्षेत्रों के निर्देशांक की गणना तस्वीरों के प्रसंस्करण के लिए एक कार्यक्रम का उपयोग करके की जा सकती है, उदाहरण के लिए, एडोब फोटोशॉप या रंग.

अंजीर। 1. मानचित्र बनाने के लिए मार्कअप छवि का एक उदाहरण

2) नाम की विशेषता का उपयोग करके इसे टैग में जोड़कर मानचित्र का नाम निर्धारित करें। हम टैग के usemap विशेषता के लिए समान मान प्रदान करते हैं।

3) प्रत्येक सक्रिय क्षेत्र के लिए वेब पेजों या वेब दस्तावेज़ के कुछ हिस्सों से लिंक जोड़ें जो उपयोगकर्ता उस समय क्लिक करेंगे जब उपयोगकर्ता छवि के सक्रिय क्षेत्र पर क्लिक करेगा।

अंजीर। 2. नक्शा छवि बनाने का एक उदाहरण, जब आप माउस कर्सर के साथ फूल पर क्लिक करते हैं, तो विवरण पृष्ठ पर एक संक्रमण होता है

छवि पथ कैसे लिखें

यदि छवि और वह फ़ाइल जिसमें इस छवि का पथ लिखा गया है, उसी फ़ोल्डर में हैं:

तब पथ में छवि का नाम और उसका विस्तार शामिल होगा:

यदि आप तस्वीर को किसी फोल्डर में ट्रांसफर करते हैं img:

इसके बाद इसका पथ उस फ़ोल्डर के नाम से शुरू होगा जिसमें यह स्थित है:

अगर फाइल index.html फ़ोल्डर में डाल दिया फ़ाइलें:

तब छवि का पथ निर्माण के साथ शुरू होगा ../:

अगर फोल्डर फ़ाइलेंफ़ाइल युक्त index.html दूसरे फ़ोल्डर में रखें, रास्ता इस तरह बन जाएगा:

Pin
Send
Share
Send
Send