वेबसाइट पर इमेज कैसे एम्बेड करें

विषयसूची:

वेबसाइट पर इमेज कैसे एम्बेड करें
वेबसाइट पर इमेज कैसे एम्बेड करें

वीडियो: वेबसाइट पर इमेज कैसे एम्बेड करें

वीडियो: वेबसाइट पर इमेज कैसे एम्बेड करें
वीडियो: HTML में छवियाँ कैसे एम्बेड करें - IMG टैग की व्याख्या - शुरुआती के लिए ट्यूटोरियल 2024, मई
Anonim

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

एक पृष्ठ में एक छवि सम्मिलित करना
एक पृष्ठ में एक छवि सम्मिलित करना

निर्देश

चरण 1

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

चरण 2

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

छवि संवाद बॉक्स डालें
छवि संवाद बॉक्स डालें

चरण 3

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

चरण 4

छवि के html-टैग में पते के अतिरिक्त, आप अतिरिक्त जानकारी निर्दिष्ट कर सकते हैं - टैग की "विशेषताएँ"। उदाहरण के लिए, alt="छवि" विशेषता में टूलटिप के लिए टेक्स्ट होता है जो तब पॉप अप होता है जब आप छवि पर माउस कर्सर घुमाते हैं: इसे - शीर्षक विशेषता से बदला जा सकता है: - आयत का आकार जिसमें ब्राउज़र होना चाहिए प्रदर्शन छवि चौड़ाई और ऊंचाई विशेषताओं द्वारा निर्धारित है: - सीमा विशेषता छवि के चारों ओर सीमा की चौड़ाई निर्दिष्ट करती है (पिक्सेल में): यदि छवि को एक लिंक बनाया जाता है, तो ब्राउज़र इसके चारों ओर एक नीली सीमा खींचेगा।इससे छुटकारा पाने के लिए, सीमा मान को शून्य पर सेट करें: - अन्य दो विशेषताओं में आसन्न तत्वों (पाठ की पंक्तियों, अन्य चित्रों आदि से) से चित्र के इंडेंटेशन की मात्रा के बारे में जानकारी होती है - hspace का आकार सेट करता है इंडेंटेशन क्षैतिज रूप से (बाएं और दाएं), बनाम स्पेस - लंबवत (नीचे और ऊपर):

सिफारिश की: