...
प्रिय पाठक, अब आप html टेबल टैग के बारे में और भी बहुत कुछ जान गए हैं। अब मैं आपको अगले पाठ पर आगे बढ़ने की सलाह देता हूं।
प्रत्येक कॉपीराइटर के जीवन में html टैग से परिचित होने का एक चरण आता है। आमतौर पर यह अनायास होता है और ग्राहक की ओर से "प्रकाशन के लिए पाठ तैयार करने" के अनुरोध जैसा दिखता है। इसका मतलब यह है कि लेख में आपको शीर्षकों, पैराग्राफों, महत्वपूर्ण स्थानों और सूचियों को उजागर करने की आवश्यकता है, लेकिन वर्ड क्षमताओं के साथ नहीं, बल्कि विशेष के साथ HTML कोडभाषा। इसमें मदद मिलेगी कॉपीराइटर के लिए टैग. कार्य के लिए आवश्यक सूची आमतौर पर छोटी होती है, लेकिन मानक आवश्यकताओं के साथ पाठ को प्रारूपित करने के लिए यह पर्याप्त है। एक कॉपीराइटर के लिए आवश्यक html टैग में क्या शामिल है? (यदि आप पढ़ने में बहुत आलसी हैं, तो नीचे स्क्रॉल करें - html टैग के बारे में एक सरल और स्पष्ट विषयगत इन्फोग्राफिक है!)
कॉपीराइटर पारंपरिक प्रश्न पूछता है. और वे सभी शब्दों से शुरू होते हैं "निर्दिष्ट करने के लिए किस टैग का उपयोग किया जाता है...":
- शीर्षक;
- अनुच्छेद;
- थंबनेल;
- इटैलिक;
- बुलेटेड/अनलेबल/सूची
यह सब तकनीकी कार्य में मसाला जोड़ता है और नए ज्ञान के अधिग्रहण को प्रोत्साहित करता है। स्थिति तब और खराब हो जाती है जब पीएस में कुंजी का आकर्षण बढ़ाने के लिए बोल्ड टेक्स्ट टैग का उपयोग करना होता है। लेकिन यह सब बहुत सरलता से हल किया जा सकता है, जिस पर हम अभी विचार करेंगे।
शीर्षक बनाने के लिए टैग
शीर्षक बनाने के लिए टैग तत्वों h1-h6 द्वारा दर्शाए जाते हैं। उन्हें अपना पत्र अंग्रेजी हेडर (शीर्षक) से मिला। आवश्यक प्रकार के हेडर को सेट करने और पीएस के लिए इसके महत्व पर जोर देने के लिए, निम्नलिखित कोड का उपयोग करें:
शीर्षक h1
शीर्षक h2
शीर्षक h3
शीर्षक h4
शीर्षक h5
शीर्षक h6
वेबसाइट पर यह इस तरह दिखेगा.
शीर्षक h1
शीर्षक h2
शीर्षक h3
शीर्षक h4
शीर्षक h5
शीर्षक h6
h1 शीर्षक का सबसे अधिक महत्व - और दृश्यता - है। इसका उपयोग पोस्ट के शीर्षक के रूप में किया जाता है और इसका उपयोग केवल एक बार किया जाता है। पाठ में उपशीर्षकों के लिए, h2 और h3 की अनुशंसा की जाती है। वे विचाराधीन सामग्री के महत्व पर जोर देने और लेख को सूचना स्तरों में विभाजित करने में मदद करते हैं।
हेडर h4-h6 व्यावहारिक रूप से उपयोग नहीं किए जाते हैं, लेकिन तार्किक ब्लॉकों और महत्वपूर्ण अंशों को उजागर करने के लिए उनकी मांग है।
बड़े लेखों के लिए शीर्षकों h1-h3 का उपयोग करना सबसे अच्छा है, छोटे लेखों के लिए - h1 और h2 का उपयोग करना सबसे अच्छा है।
सूचियाँ: बुलेटेड और बिना लेबल वाली
संरचित अच्छे पाठ में हमेशा एक या कई सूचियाँ होती हैं। मेरे अपने तरीके से उपस्थितिसूचियाँ हैं:
- चिह्नित - उनके पास नंबरिंग है;
- अचिह्नित - तत्वों को प्रतीकों के साथ हाइलाइट किया जाता है।
लेकिन सभी वर्ड डिज़ाइन साइट पर प्रकाशनों के लिए उपयुक्त नहीं हैं, इसलिए यह सीखने लायक है कि HTML टैग्स में सूचियों को ठीक से कैसे प्रारूपित किया जाए।
टैग बुलेटेड सूची
ऐसा लगता है:
अनबुल्ड सूची टैगइसलिए:
इसके अलावा, प्रत्येक सूची तत्व का अपना HTML फ्रेम होता है:
यह पता चला है कि HTML कोड का उपयोग करके पाठ में बुलेटेड सूची को हाइलाइट करने के लिए, आपको उपयोग किए गए दोनों प्रकार के तत्वों को संयोजित करने की आवश्यकता होगी। यह इस तरह दिखेगा:
- सामग्री सूचीबद्ध करें
- सामग्री सूचीबद्ध करें
- सामग्री सूचीबद्ध करें
- सामग्री सूचीबद्ध करें
अचिह्नित सूची के लिए यह समान है:
- सामग्री सूचीबद्ध करें
- सामग्री सूचीबद्ध करें
- सामग्री सूचीबद्ध करें
- सामग्री सूचीबद्ध करें
हमने सूचियाँ सुलझा ली हैं। हम आगे बढ़ सकते हैं.
पाठ जोर टैग: बोल्ड और इटैलिक
यह पता लगाने पर कि कौन सा टैग आपको टेक्स्ट को सही ढंग से प्रारूपित करने की अनुमति देता है, आपको लगभग तुरंत प्रत्येक मामले के लिए दो कोड विकल्प मिलते हैं। इससे गैर-प्रोग्रामर्स के बीच भ्रम पैदा होता है और सवाल उठता है: ग्राहक को वास्तव में किस टैग की आवश्यकता है।
सब कुछ बहुत सरल है! टैग भौतिक और तार्किक स्वरूपण विकल्प प्रदान करते हैं। पहला उपयोगकर्ताओं के लिए आवश्यक है, दूसरा - खोज इंजन के लिए। "खोज इंजन", अपने लिए उपयुक्त HTML कोड देखकर, चयनित क्षेत्र को ध्यान में रखते हैं और रैंकिंग करते समय प्राप्त जानकारी का उपयोग करते हैं, इसलिए तार्किक स्वरूपण का उपयोग करके पाठ को हाइलाइट करना कोई गलती नहीं होगी।
HTML टैग्स का उपयोग करने से खोज इंजनों को खुश करना और उपयोगकर्ता के लिए टेक्स्ट को दृश्य रूप से हाइलाइट करना संभव हो जाता है। अधिक प्राथमिकता क्या है, स्वयं निर्णय करें:
पीएस और उपयोगकर्ताओं के लिए किसी वाक्यांश को बोल्ड में हाइलाइट करना
उपयोगकर्ताओं के लिए बोल्ड वाक्यांश
पीएस और उपयोगकर्ताओं के लिए वाक्यांशों को इटैलिकाइज़ करना
उपयोगकर्ताओं के लिए किसी वाक्यांश को इटैलिक करें
मेरे पास टैग के विषय पर एक बड़ा और बहुत विवादास्पद लेख है तैलीय स्राव, जिसे वह कहा जाता है।
यदि प्रोग्रामर में से कोई अचानक विषय पर ध्यान देता है, तो मैं एक बार फिर ध्यान देने की जल्दबाजी करता हूं कि समीक्षा कॉपीराइटर के लिए है: टैग कैसे लगाएं, वे क्या हैं और चुनते समय क्या विचार करना महत्वपूर्ण है। और अंत में, एक और लोकप्रिय HTML कोड की आवश्यकता है अनुच्छेदों को उजागर करने के लिए. यह
शुरुआती टैग को पैराग्राफ की शुरुआत से पहले रखा जाता है, और समापन टैग को अंत में रखा जाता है। यदि कोई अनुच्छेद किसी सूची के साथ समाप्त होता है, तो
सूची के लिए उपयोग किए गए सभी टैग के बाद रखा गया है।
खैर, अंत में कुछ सरल विषयगत इन्फोग्राफिक्स:
जब टिप्पणियों में विषय पर चर्चा शुरू हुई, तो सफल कॉपीराइटरों के क्लब में सूचना-ग्राफिक्स और लेख के लिए एक दिलचस्प उत्तर दिया गया प्रतिक्रिया. यहां चर्चा में एक आधिकारिक भागीदार की राय का स्क्रीनशॉट दिया गया है।
पढ़ें: 6,687
प्रश्न का उत्तर देने से पहले " HTML में चित्र कैसे डालें?“, यह ध्यान दिया जाना चाहिए कि बड़ी मात्रा में ग्राफिक सामग्री वाले वेब पेजों को ओवरलोड करना इसके लायक नहीं है, क्योंकि इससे न केवल उपयोगकर्ता द्वारा संसाधन की दृश्य धारणा में सुधार होगा, बल्कि पेज लोडिंग समय भी बढ़ जाएगा।
वेबसाइट बनाते समय, सबसे अधिक उपयोग किए जाने वाले ग्राफिक प्रारूप पीएनजी, जीआईएफ और जेपीईजी हैं, और छवियों के साथ डिजाइन कार्य के लिए - ग्राफ़िक्स संपादक एडोब फोटोशॉप, जिसमें गुणवत्ता खोए बिना छवियों को संपीड़ित करने और आकार बदलने की समृद्ध क्षमताएं हैं, जो वेब विकास के लिए अविश्वसनीय रूप से महत्वपूर्ण है।
HTML में इमेज कैसे डालें?
किसी HTML पृष्ठ में कोई छवि सम्मिलित करने के लिए, एक सरल टैग का उपयोग करें:
,
जहां xxx छवि पता है. यदि छवि पृष्ठ के समान निर्देशिका में है, तो टैग इस प्रकार दिखेगा:
हालाँकि, हाई-स्पीड और स्थिर इंटरनेट अभी तक दुनिया के सभी कोनों तक नहीं पहुँच पाया है, और ऐसा होता है कि वेबसाइट पर छवि बस लोड नहीं होती है। ऐसे मामलों के लिए, वैकल्पिक पाठ की अवधारणा है।
यह चित्र के स्थान पर तब दिखाया जाता है जब यह अनुपलब्ध होता है, लोड हो रहा होता है, या ब्राउज़र ऑपरेटिंग मोड में "चित्रों के बिना" दिखाया जाता है। इसे alt tag विशेषता का उपयोग करके जोड़ा जाता है ![]()
.
ग्राफ़िक फ़ाइल में वैकल्पिक टेक्स्ट जोड़ने का उदाहरण:
वैकल्पिक पाठ
HTML में छवि आकार निर्दिष्ट करना
ग्राफ़िक फ़ाइल के प्रदर्शन आयामों को बदलने के लिए, ऊंचाई और चौड़ाई टैग का उपयोग करें, जहां ऊंचाई ऊंचाई है और चौड़ाई चौड़ाई है, जिसे पिक्सेल में मापा जाता है।
इन विशेषताओं का उपयोग करते समय, ब्राउज़र पहले ग्राफिक सामग्री के लिए स्थान आवंटित करता है, समग्र पृष्ठ लेआउट तैयार करता है, पाठ प्रदर्शित करता है, और फिर छवि को स्वयं लोड करता है।
चित्र को निर्दिष्ट आयामों के साथ एक आयत में रखा गया है, और यदि पैरामीटर मूल से छोटे या बड़े हैं, तो चित्र खींचा या संपीड़ित किया जाता है।
यदि ऊंचाई और चौड़ाई विशेषताओं का उपयोग नहीं किया जाता है, तो ब्राउज़र छवि को तुरंत लोड करता है, जिससे पाठ और अन्य पृष्ठ तत्वों के प्रदर्शन में देरी होती है।
इन मापदंडों को पिक्सेल (चित्र का आकार स्थिर है और उपयोगकर्ता के स्क्रीन रिज़ॉल्यूशन पर निर्भर नहीं करता है) और प्रतिशत (चित्र का आकार स्क्रीन रिज़ॉल्यूशन पर निर्भर करता है) दोनों में निर्दिष्ट किया जा सकता है।
उदाहरण के लिए:
यह याद रखना चाहिए कि जिस समय आप छवि का मूल आकार बदलते हैं, उसके अनुपात को बनाए रखना आवश्यक है।
ऐसा करने के लिए, केवल एक पैरामीटर का मान निर्दिष्ट करना पर्याप्त है ( चौड़ाई या ऊंचाई), और ब्राउज़र स्वचालित रूप से दूसरे के मूल्य की गणना करेगा।
HTML में छवि स्थान
जैसा कि बहुतों के साथ होता है एचटीएमएल टैग, को संरेखण विशेषता लागू करें, जो छवि को संरेखित करती है:
- चित्र पाठ के ऊपर स्थित है;
- चित्र पाठ के नीचे स्थित है;
- चित्र पाठ के बाईं ओर स्थित है;
- चित्र पाठ के दाईं ओर स्थित है।
चित्र लिंक
यह अग्रानुसार होगा:
जैसा कि आप देख सकते हैं, ग्राफ़िक सम्मिलित करेंयह एक लिंक हो सकता है और क्लिक करने पर पूर्ण या संक्षिप्त रूप में लिखे किसी भी पते पर रीडायरेक्ट हो सकता है।
मैं HTML में किसी छवि को पृष्ठभूमि कैसे बना सकता हूँ?
छवि को न केवल दृश्य वस्तु के रूप में पृष्ठ पर डाला जा सकता है, बल्कि पृष्ठभूमि में भी बनाया जा सकता है। किसी छवि को पृष्ठभूमि के रूप में परिभाषित करने के लिए, आपको टैग में पृष्ठभूमि = "xxx" विशेषता निर्दिष्ट करने की आवश्यकता है, जहां xxx छवि का पता है, जो ऊपर दिए गए उदाहरणों की तरह ही निर्दिष्ट है।
उदाहरण के लिए, आइए निम्नलिखित बनावट छवि को पृष्ठभूमि छवि के रूप में सेट करें:
छवि को तैयार पृष्ठ वाले फ़ोल्डर में सहेजें और निम्नलिखित पंक्तियाँ लिखें:
पृष्ठभूमि छवि वाला पृष्ठ</head>
पाठ के साथ पृष्ठभूमि.
पृष्ठ पर पृष्ठभूमि छवि सेट है.
दर्ज करना HTML में छवियांउपयोग किए जाने वाले दो मुख्य प्रारूप GIF और JPEG हैं। GIF फॉर्मेट में स्टोर कर सकते हैं सरल एनीमेशन(डायनामिक बैनर), JPEG बहुत सारे रंगों वाली छवियों, जैसे फ़ोटोग्राफ़, के लिए बढ़िया है। वेब ग्राफ़िक्स के लिए तीसरा प्रारूप है पीएनजी प्रारूप, लेकिन वेब डिज़ाइन में इसका व्यापक रूप से उपयोग नहीं किया जाता है। GIF या JPEG प्रारूप में कोई भी छवि टैग का उपयोग करके वेब पेज पर डाली जाती है < img >
, कोई समापन टैग नहीं है।
एसआरसी विशेषता
विशेषता के माध्यम से स्रोतछवि फ़ाइल का पता (यूआरएल) निर्दिष्ट है, अर्थात ब्राउज़र इस विशेषता में निर्दिष्ट पथ (यूआरएल) का उपयोग करके साइट निर्देशिका में वांछित छवि ढूंढता है। सुविधा के लिए, सभी साइट छवियां एक अलग फ़ोल्डर में स्थित होती हैं, जिसे आमतौर पर नाम दिया जाता है छवि. उदाहरण के लिए, कोई भी छवि लें, अधिमानतः एक छोटा प्रारूप, और इसे नाम के साथ बनाए गए फ़ोल्डर छवि में सहेजें प्राइमर.jpg. आगे हम इसे प्रशिक्षण के लिए संदर्भित करेंगे।
अच्छा, आइए पृष्ठ पर एक चित्र डालने का प्रयास करें? हम कोड लिखते हैं (पथ - यूआरएल, छवियों के साथ फ़ोल्डर के स्थान के आधार पर लिखा गया है):
< img src="image/primer.jpg">
वैकल्पिक पाठ। एएलटी विशेषता
वैकल्पिक पाठ क्यों निर्दिष्ट किया गया है? आइए क्रम से चलें. प्रत्येक ब्राउज़र में छवियों को अक्षम करने के लिए एक फ़ंक्शन होता है, इसलिए इस फ़ंक्शन का उपयोग करने वाला उपयोगकर्ता टैग में निर्दिष्ट विवरण देख सकता है वैकल्पिक, जो छवि का प्रतिनिधित्व करता है। यह आज प्रासंगिक नहीं हो सकता है, क्योंकि प्राथमिकता दी जाती है असीमित टैरिफ, लेकिन फिर भी इसे अच्छे आचरण का नियम माना जाता है। आइए कोड उदाहरण देखें:
आप इसे केवल ब्राउज़र में छवियों का प्रदर्शन बंद करके ही देख सकते हैं।
आकार निर्धारित करें. चौड़ाई और ऊंचाई विशेषताएँ
मुझे तुरंत ध्यान देना चाहिए कि चौड़ाई और ऊंचाई बहुत महत्वपूर्ण पैरामीटर हैं, इसलिए आपको उन्हें अनदेखा नहीं करना चाहिए। अनिर्दिष्ट छवि आकारों और ब्राउज़र में अक्षम छवियों के साथ, स्वयं निर्णय करें, जब छवियां लोड नहीं होती हैं, तो छोटे खाली वर्ग उस स्थान से पूरी तरह से अलग स्थान पर स्थित हो सकते हैं जहां आपने उन्हें रखने की योजना बनाई थी। इससे पेज की सुंदरता नहीं बढ़ेगी. इसलिए, आलसी मत बनो और हमेशा आयामों को HTML कोड में लिखें।
टैग का उपयोग करके छवि का आकार निर्धारित किया जाता है चौड़ाई- चौड़ाई और ऊंचाई— ऊँचाई, मान पिक्सेल में और स्क्रीन चौड़ाई के प्रतिशत के रूप में सेट किए जाते हैं (प्रतिशत के साथ, बहुत सावधान रहें)। आइए कोड देखें:
निष्कर्ष
छवियां साइट आगंतुकों को आकर्षित करती हैं, बहुत सारी दृश्य जानकारी रखती हैं, उपयोग में आसान होती हैं, लेकिन यदि आप एक अच्छी, लोकप्रिय साइट बनाना चाहते हैं तो आपको अभी भी कुछ सिफारिशों का पालन करना होगा।
आपको बहुत बड़े छवि फ़ाइल आकार का उपयोग नहीं करना चाहिए, क्योंकि इससे पेज लोडिंग गति प्रभावित होगी। मेरा विश्वास करो, यह अंतिम संकेतक से बहुत दूर है।
ALT विशेषता बहुत महत्वपूर्ण है और इसे प्रत्येक IMG टैग में जोड़ा जाना चाहिए। पाठ संदेश की सामग्री में छवि का बहुत सटीक और संक्षिप्त वर्णन होना चाहिए।
वेब पेज पर छवियां पाठ्य सामग्री के अनुरूप होनी चाहिए।
इस अनुभाग का अध्ययन करने के बाद, आप पहले से ही खुद को एक वेबमास्टर के रूप में आज़मा सकते हैं और एक पूर्ण HTML पेज बना सकते हैं। और फिर मल्टीमीडिया सम्मिलित करने के लिए आगे बढ़ते हैं।
नमस्कार प्रिय ब्लॉग पाठकों! इस लेख में आप इसके बारे में सब कुछ जानेंगे पर एक छवि कैसे डालें एचटीएमएल पेज
. क्या आपके पास कई छवियां हैं जिन्हें आप अपने पेज पर लगाना चाहते हैं या क्या आप अपनी साइट पर कोई लोगो लगाना चाहते हैं? ये सब आसान है. इस लेख को पढ़ने के बाद, आप बिना किसी परेशानी के अपने html पृष्ठों में चित्र सम्मिलित कर सकेंगे। ऐसा करने के लिए हम विस्तार से बात करेंगे आईएमजी टैगऔर इसकी विशेषताओं के आधार पर, हम GIF, JPEG और PNG जैसे ग्राफ़िक फ़ाइल स्वरूपों पर एक नज़र डालेंगे, और नई HTML5 सुविधाओं पर भी नज़र डालेंगे जो आपकी साइट में वीडियो और ऑडियो सम्मिलित करना आसान बनाती हैं।
इस तथ्य के कारण कि ग्राफिक डेटा और एचटीएमएल पाठएक फ़ाइल में संयोजित नहीं किया जा सकता; उन्हें साइट पर प्रदर्शित करने के लिए, HTML पृष्ठों के अन्य तत्वों की तुलना में एक अलग दृष्टिकोण का उपयोग किया जाता है। सबसे पहले, ग्राफ़िक छवियों और अन्य मल्टीमीडिया डेटा को अलग-अलग फ़ाइलों में संग्रहीत किया जाता है। और उन्हें एक वेब पेज में एम्बेड करने के लिए, विशेष टैग का उपयोग किया जाता है जिसमें इन व्यक्तिगत फ़ाइलों के लिंक होते हैं। खास तौर पर ऐसा टैग है आईएमजी टैग. किसी पते के साथ ऐसे टैग का सामना करने पर, ब्राउज़र पहले वेब सर्वर से छवि, ऑडियो या वीडियो के साथ संबंधित फ़ाइल का अनुरोध करता है, और उसके बाद ही इसे वेब पेज पर प्रदर्शित करता है।
सभी ग्राफ़िक छवियां और, सामान्य तौर पर, कोई भी डेटा जो वेब पेज से अलग फ़ाइलों में संग्रहीत होता है, कहलाते हैं कार्यान्वितपृष्ठ तत्व.
चित्र सम्मिलित करने और "img" टैग को विस्तार से देखने से पहले, ग्राफिक प्रारूपों के बारे में थोड़ा सीखना उचित है।
ग्राफ़िक छवि प्रारूप.
कई अलग-अलग ग्राफिक प्रारूप हैं, लेकिन ब्राउज़र केवल कुछ का ही समर्थन करते हैं। आइए उनमें से तीन पर नजर डालें।
1. जेपीईजी प्रारूप(फ़ोटोग्राफ़ी संबंधी विशेषज्ञों का संयुक्त समूह). छवियों को संग्रहीत करने के लिए उपयोग किया जाने वाला एक काफी लोकप्रिय प्रारूप। 24-बिट रंग का समर्थन करता है और तस्वीरों में सभी हाफ़टोन को अपरिवर्तित रखता है। लेकिन जेपीईजी पारदर्शिता का समर्थन नहीं करता है और छवियों में छोटे विवरण और पाठ को विकृत करता है। JPEG का उपयोग मुख्य रूप से तस्वीरों को संग्रहीत करने के लिए किया जाता है। इस प्रारूप की फ़ाइलों में jpg, jpe, jpeg एक्सटेंशन होते हैं।
2. GIF प्रारूप(ग्राफिक्स बदलाव प्रारूप). इस प्रारूप का मुख्य लाभ एक फ़ाइल में एक साथ कई छवियों को संग्रहीत करने की क्षमता है। यह आपको संपूर्ण एनिमेटेड वीडियो बनाने की अनुमति देता है। दूसरे, यह पारदर्शिता का समर्थन करता है। मुख्य दोष यह है कि यह केवल 256 रंगों का समर्थन करता है, जो फ़ोटो संग्रहीत करने के लिए उपयुक्त नहीं है। GIF का उपयोग मुख्य रूप से लोगो, बैनर, पारदर्शी क्षेत्रों वाली छवियों और टेक्स्ट को संग्रहीत करने के लिए किया जाता है। इस प्रारूप की फ़ाइलों में एक्सटेंशन gif होता है।
3. पीएनजी प्रारूप(पोर्टेबल नेटवर्क ग्राफ़िक्स). इस प्रारूप को पुराने जीआईएफ और कुछ हद तक जेपीईजी के प्रतिस्थापन के रूप में विकसित किया गया था। पारदर्शिता का समर्थन करता है, लेकिन एनीमेशन की अनुमति नहीं देता। यह प्रारूपएक पीएनजी एक्सटेंशन है.
वेबसाइट बनाते समय, वे आमतौर पर JPEG या GIF प्रारूप में छवियों का उपयोग करते हैं, लेकिन कभी-कभी वे PNG का उपयोग करते हैं। मुख्य बात यह समझना है कि किन मामलों में किस प्रारूप का उपयोग करना बेहतर है। संक्षेप में:
JPEG का उपयोग उन तस्वीरों या ग्रेस्केल छवियों को संग्रहीत करने के लिए सबसे अच्छा किया जाता है जिनमें टेक्स्ट नहीं होता है;
- GIF का उपयोग मुख्य रूप से एनीमेशन के लिए किया जाता है;
- पीएनजी बाकी सभी चीजों (आइकन, बटन आदि) के लिए प्रारूप है।
HTML पृष्ठों में छवियाँ सम्मिलित करना
तो, आप किसी वेब पेज पर एक छवि कैसे सम्मिलित करते हैं? आप एकल का उपयोग करके एक छवि सम्मिलित कर सकते हैं आईएमजी टैग. ब्राउज़र छवि को वेब पेज पर उस स्थान पर रखता है जहां उसका सामना img टैग से होता है।
HTML में छवियाँ सम्मिलित करने के लिए कोडपेज इस तरह दिखता है:
यह HTML कोड वेब पेज पर image.jpg फ़ाइल में संग्रहीत एक छवि रखेगा, जो वेब पेज के समान फ़ोल्डर में स्थित है। जैसा कि आपने देखा होगा, चित्र का पता दर्शाया गया है स्रोत विशेषता. मैं आपको पहले ही बता चुका हूं कि यह क्या है। तो, src विशेषता एक आवश्यक विशेषता है जो छवि के साथ फ़ाइल के पते को इंगित करने का कार्य करती है। Src विशेषता के बिना, img टैग अर्थहीन है.
छवि के साथ फ़ाइल का पता निर्दिष्ट करने के कुछ और उदाहरण यहां दिए गए हैं:
यह HTML कोड image.jpg नामक पेज पर एक छवि डालेगा, जो वेबसाइट के मूल में स्थित इमेज फ़ोल्डर में संग्रहीत है।
Src विशेषता में न केवल शामिल हो सकते हैं सापेक्ष कड़ियाँछवियों के लिए. चूंकि छवियों को html पृष्ठों के साथ ऑनलाइन संग्रहीत किया जाता है, इसलिए प्रत्येक छवि फ़ाइल का अपना यूआरएल होता है। इसलिए, आप छवि यूआरएल को src विशेषता में सम्मिलित कर सकते हैं। उदाहरण के लिए:
यह कोड साइट mysite.ru से एक छवि को पृष्ठ पर सम्मिलित करेगा। URL का उपयोग आम तौर पर तब किया जाता है जब आप किसी अन्य साइट पर किसी छवि की ओर इशारा कर रहे होते हैं। आपकी साइट पर संग्रहीत छवियों के लिए, सापेक्ष लिंक का उपयोग करना बेहतर है।
आईएमजी टैग एक इनलाइन तत्व है, इसलिए इसे ब्लॉक तत्व के अंदर रखना बेहतर है, उदाहरण के लिए "पी" टैग के अंदर - पैराग्राफ:
आइए अभ्यास करें और पिछले लेखों को हमारे पेज पर पेस्ट करें एचटीएमएल छवि. मैं अपने पेज की html फ़ाइल के बगल में एक "images" फ़ोल्डर बनाऊंगा और वहां एक "bmw.jpg" छवि फ़ाइल रखूंगा, जो इस तरह दिखती है:
फिर सम्मिलित छवि वाले पृष्ठ का html कोड इस प्रकार होगा:
और ब्राउज़र में प्रदर्शन परिणाम देखें:
जैसा कि हम देखते हैं, वेब पेजों पर छवियां रखने में कुछ भी जटिल नहीं है। आगे, आइए "img" टैग की कुछ अन्य महत्वपूर्ण विशेषताओं पर नज़र डालें।
ऑल्ट विशेषता एक फ़ॉलबैक विकल्प है
चूँकि छवि फ़ाइलें वेब पेजों से अलग संग्रहीत की जाती हैं, ब्राउज़र को उन्हें पुनः प्राप्त करने के लिए अलग से अनुरोध करना पड़ता है। लेकिन क्या होगा अगर पेज पर बहुत सारी छवियां हों और नेटवर्क कनेक्शन की गति कम हो, तो लोड हो रहा है अतिरिक्त फ़ाइलेंइसमें काफी समय लगेगा. और यह और भी बुरा है अगर छवि आपकी जानकारी के बिना सर्वर से हटा दी गई हो।
इन मामलों में, वेब पेज स्वयं सफलतापूर्वक लोड हो जाएगा, छवियों के बजाय केवल सफेद आयतें प्रदर्शित होंगी। इसलिए, उपयोगकर्ता को यह बताने के लिए कि छवि क्या है। इस विशेषता का उपयोग करके, आप तथाकथित प्रतिस्थापन पाठ निर्दिष्ट करते हैं, जो छवि लोड होने तक एक खाली आयत में प्रदर्शित किया जाएगा:
और यह मोटे तौर पर ऐसा दिखता है:
छवि के आयाम सेट करें
अभी भी कुछ img टैग विशेषताएँ हैं जिनके बारे में आपको जानना चाहिए। यह कुछ गुण हैं चौड़ाईऔर ऊंचाई. आप छवि आयाम निर्दिष्ट करने के लिए इनका उपयोग कर सकते हैं:
दोनों विशेषताएँ आकार को दर्शाती हैं पिक्सल. चौड़ाई विशेषता ब्राउज़र को बताती है कि छवि कितनी चौड़ी होनी चाहिए, और ऊंचाई विशेषता यह बताती है कि यह कितनी लंबी होनी चाहिए। इन दोनों विशेषताओं का उपयोग एक साथ या अलग-अलग किया जा सकता है। उदाहरण के लिए, यदि आप केवल चौड़ाई विशेषता निर्दिष्ट करते हैं, तो ब्राउज़र स्वचालित रूप से निर्दिष्ट चौड़ाई के अनुपात में ऊंचाई का चयन करेगा और केवल ऊंचाई विशेषता का उपयोग करने के मामले में भी। यदि आप इन विशेषताओं को बिल्कुल भी निर्दिष्ट नहीं करते हैं, तो ब्राउज़र स्क्रीन पर प्रदर्शित करने से पहले छवि का आकार स्वचालित रूप से निर्धारित करेगा। यह केवल ध्यान देने योग्य है कि छवि आकार निर्दिष्ट करने से पृष्ठ प्रदर्शित करते समय ब्राउज़र की गति थोड़ी तेज हो जाएगी।
फिलहाल यह सब पृष्ठों पर छवियां डालने के बारे में है, फिर हम देखेंगे कि किसी वेबसाइट पर ऑडियो या वीडियो कैसे डालें...
HTML 5 का उपयोग करके वीडियो और ऑडियो सम्मिलित करना
नया html5 विनिर्देश कई नए टैग पेश करता है जो मीडिया फ़ाइलों को एम्बेड करना बहुत आसान बनाता है। यह मुख्य रूप से वीडियो और ऑडियो पर लागू होता है।
दर्ज करना ऑडियो HTML5 प्रदान करता है युग्मित टैग ऑडियो. उस फ़ाइल का पता जिसमें ऑडियो क्लिप संग्रहीत है, src विशेषता का उपयोग करके दर्शाया गया है जो पहले से ही हमारे लिए परिचित है:
"ऑडियो" टैग पृष्ठ पर एक ब्लॉक तत्व बनाता है। डिफ़ॉल्ट रूप से, ब्राउज़र ऑडियो क्लिप नहीं चलाएगा। ऐसा करने के लिए, आपको ऑडियो टैग में एक विशेष विशेषता निर्दिष्ट करनी होगी स्वत: प्ले. खास इसलिए क्योंकि इससे कोई फर्क नहीं पड़ता. टैग में इस विशेषता की उपस्थिति ही इसे प्रभावी बनाने के लिए पर्याप्त है।
डिफ़ॉल्ट रूप से, ऑडियो क्लिप वेब पेज पर प्रदर्शित नहीं होती है। लेकिन यदि आप "ऑडियो" टैग में बिना मूल्य के कोई विशेषता डालते हैं को नियंत्रित करता है, ब्राउज़र वेब पेज पर उस स्थान पर प्रदर्शित होगा जहां ऑडियो टैग, ऑडियो प्लेबैक नियंत्रण। उनमें एक प्ले/पॉज़ बटन, एक प्लेबैक बार और एक वॉल्यूम नियंत्रण शामिल है।
