किसी वेब पेज के टेक्स्ट में एक छवि सम्मिलित करने के लिए एकल टैग का उपयोग किया जाता है। (तालिका पी 1)। इस टैग की विशेषताएँ पृष्ठ पर रखी गई छवि के सभी पैरामीटर सेट करती हैं। ग्राफ़िक फ़ाइल के पते और नाम को परिभाषित करने के लिए SRC विशेषता आवश्यक है। यदि एसआरसी विशेषता सेट नहीं है, तो केवल रिक्त छवि आइकन प्रदर्शित किया जाएगा।

टैग संरचना एसआरसी विशेषता के साथ ऐसा दिखता है:

.

यदि इंस्टीट्यूट नामक ग्राफिक फ़ाइल वेब पेज के समान फ़ोल्डर में स्थित है, तो इसे रखने के लिए आपको लिखना चाहिए:

.

फ़ाइल का नाम प्रारूप

D:\Collection\Cities\MINSK.GIF पर स्थित MINSK नाम से एक ग्राफ़िक फ़ाइल रखने के लिए, आपको लिखना चाहिए .

टैग का उपयोग करना वेब पेज में इंटरनेट पर किसी अन्य कंप्यूटर पर स्थित एक ग्राफ़िक फ़ाइल होती है।

हमारे संस्थान की तस्वीर के साथ एक वेब पेज बनाने के लिए, जो चित्र में दिखाया गया है। 4.1, आपको निम्नलिखित HTML कोड दर्ज करना होगा:

हमारा संस्थान

चावल। 4.1. संस्थान की फोटो वाला वेब पेज

उपरोक्त उदाहरण में, फोटो की ऊंचाई (HEIGHT) 200 पिक्सेल और चौड़ाई (WIDTH) 300 पिक्सेल है। फोटो लगाने के लिए सेंटर अलाइनमेंट के साथ एक पैराग्राफ बनाया जाता है।

क्षैतिज रेखाएँ

एकल टैग का उपयोग करके वेब पेज पर क्षैतिज रेखाएँ रखी जाती हैं

---

. आकार, चौड़ाई, रंग और संरेखित विशेषताएँ क्रमशः रेखाओं की मोटाई, चौड़ाई, रंग और संरेखण को बदलती हैं।

आइए क्षैतिज रेखाओं के स्थान को समझाने के लिए कुछ उदाहरण देखें:

1.

---

- पूरे पृष्ठ पर एक क्षैतिज रेखा, 2 पिक्सेल मोटी।

2.

---

WIDTH = "200" ALIGN = "दाएं"> - हरे रंग की एक क्षैतिज रेखा, 15 पिक्सेल मोटी, 200 पिक्सेल चौड़ी और दाईं ओर संरेखित।

3.

---

- पूरे पृष्ठ को कवर करने वाली एक क्षैतिज नीली रेखा, 25 पिक्सेल मोटी।

4.

---

WIDTH = "300" ALIGN = "LEFT"> - लाल रंग की एक क्षैतिज रेखा, 20 पिक्सेल मोटी, 300 पिक्सेल चौड़ी और बाईं ओर संरेखित।

चार रिकॉर्ड किए गए उदाहरणों के लिए लाइन डिस्प्ले चित्र में दिखाया गया है। 4.2.

चावल। 4.2. वेब पेज पर पंक्तियाँ

तालिकाएं

टेबल बनाना

तालिका युग्मित टैग का उपयोग करके बनाई गई है

… . यह टैग उस स्थान पर एक तालिका बनाता है जहां इसे जोड़ा जाता है
HTML कोड में.

किसी भी तालिका में पंक्तियाँ होती हैं, और पंक्तियाँ - कोशिकाओं की। तालिका पंक्तियों और कक्षों को बनाने के लिए निम्नलिखित टैग का उपयोग किया जाता है:

... - नई लाइन;

... - हेडर सेल;

... - एक नियमित टेबल सेल।

ये टैग युग्मित टैग के अंदर लिखे जाते हैं

… .

तालिका पंक्ति दर पंक्ति बनाई जाती है - पहले, एक पंक्ति निर्दिष्ट की जाती है और उसमें कोशिकाओं की आवश्यक संख्या इंगित की जाती है, फिर दूसरी पंक्ति, आदि।

चित्र में दिखाई गई तालिका प्राप्त करने के लिए। 5.1, आपको निम्नलिखित HTML कोड टाइप करना होगा:

चावल। 5.1. तालिका पृष्ठ

टेबल हेडर सेल में टेक्स्ट (चित्र 5.1) सेमी-बोल्ड फ़ॉन्ट में प्रदर्शित होता है और सेल के केंद्र में संरेखित होता है, जबकि नियमित सेल में टेक्स्ट हाइलाइट नहीं होता है और बाईं ओर संरेखित होता है।

यह ध्यान दिया जाना चाहिए कि उपरोक्त पृष्ठ के HTML कोड में टैग

कारें	कीमत	पायाब	5000	गोल्फ़	6000

"1" मान के साथ BORDER विशेषता शामिल है। इसका मतलब यह है कि चित्र में दिखाई गई तालिका में। 5.1, बाहरी बॉर्डर की मोटाई है
1 पिक्सेल. अगर हम लिखते हैं

… ,

तो बाहरी बॉर्डर की मोटाई 6 पिक्सेल होगी। तालिका सीमाओं को प्रदर्शित होने से रोकने के लिए, आपको BORDER विशेषता को 0 पर सेट करना होगा, या बस इस विशेषता को छोड़ देना होगा।

अधिकांश वेब पेजों में ग्राफ़िक्स होते हैं। यह आपको जानकारी को रंगीन और स्पष्ट रूप से प्रस्तुत करने की अनुमति देता है। कई मामलों में, लंबा पाठ विवरण देने की तुलना में चित्र दिखाना बेहतर होता है।

किसी पृष्ठ पर ग्राफ़िक्स रखने के दो तरीके हैं:

• व्यक्तिगत चित्रों का सम्मिलन;
• पृष्ठभूमि को चित्र से भरना।

किसी भी स्थिति में, ग्राफ़िक छवि फ़ाइल से ली गई है।

ग्राफ़िक्स सम्मिलित करना

किसी ग्राफ़िक प्रारूप फ़ाइल से किसी पृष्ठ पर ग्राफ़िक छवि सम्मिलित करना टैग का उपयोग करके किया जाता है (अंग्रेजी से, छवि - छवि) एसआरसी विशेषता के तर्क के रूप में फ़ाइल पते को दर्शाता है:

< IMG SRC = "адрес_графического_файла" >

ग्राफिक फ़ाइल पता या तो एक यूआरएल या फ़ाइल नाम है, संभवतः एक पथ के साथ। उदाहरण के लिए, एक ग्राफिक फ़ाइल logotip.jpg प्रदर्शित करने के लिए आपको टैग लिखना चाहिए:

< IMG SRC = "logotip.jpg" >

किसी टैग में ग्राफ़िक छवि की स्थानांतरण गति बढ़ाने के लिए आप विशेषता का उपयोग कर सकते हैं ( अतिरिक्त पैरामीटर) LOWSRC, जो एक ग्राफ़िक्स फ़ाइल का पता एक तर्क के रूप में लेता है। आप दो ग्राफ़िक फ़ाइलें बना सकते हैं: एक (उदाहरण के लिए, मान लें कि logotip.jpg) में एक उच्च-रिज़ॉल्यूशन छवि है, और दूसरे (उदाहरण के लिए, logotip.gif) में एक कम-रिज़ॉल्यूशन छवि है। फिर टैग:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

...ब्राउज़र को निर्देश देता है कि पहले logotip.gif फ़ाइल डाउनलोड करें, और फिर प्राप्त होते ही उसे logotip.jpg फ़ाइल से बदल दें।

ग्राफ़िक्स लोडिंग को तेज़ करने का दूसरा तरीका विशेषताओं का उपयोग करके उस आयताकार क्षेत्र का आकार निर्धारित करना है जिसमें ग्राफ़िक रखा जाएगा चौड़ाई(चौड़ाई) और ऊंचाई(ऊंचाई), पिक्सेल में मापी गई। यदि आप इन विशेषताओं को निर्दिष्ट करते हैं, तो ब्राउज़र पहले ग्राफ़िक्स के लिए स्थान आवंटित करेगा, दस्तावेज़ लेआउट तैयार करेगा, टेक्स्ट प्रदर्शित करेगा, और उसके बाद ही ग्राफ़िक्स लोड करेगा। ध्यान दें कि ब्राउज़र छवि को निर्दिष्ट फ़्रेम आकार में फिट करने के लिए संपीड़ित या फैलाता है। छवि आयाम निर्दिष्ट करने का एक उदाहरण:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

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

निम्नलिखित टैग ग्राफिक्स को लोगोटिप.जेपीजी फ़ाइल से दाईं ओर लपेटने के लिए सेट करता है (छवि पाठ के बाईं ओर स्थित होगी):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

यदि आप पाठ के दाईं ओर एक चित्र रखना चाहते हैं, तो आपको विशेषता की आवश्यकता है संरेखित करेंतर्क निर्दिष्ट करें सही:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

छवि के चारों ओर मार्जिन सेट करने के लिए, आपको एक टैग लिखना होगा जैसे:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

यहां संख्या 20 और 10 फ़ील्ड का आकार निर्धारित करती हैं।

आइए एक उदाहरण देखें बंटवारेग्राफिक्स और पाठ। नोटपैड (टेक्स्ट एडिटर नोटपैड) विंडोज़ खोलें। ऊपर चर्चा किए गए टैग का उपयोग करके इसमें HTML कोड लिखें। नीचे एक प्रोग्राम है जो कुछ टेक्स्ट और ग्राफिक्स आउटपुट करता है। आप अपने पास मौजूद किसी भी फ़ाइल को ग्राफ़िक फ़ाइल के रूप में उपयोग कर सकते हैं। यहां प्रयुक्त फ़ाइल logotip.gif है।

< HTML >

< HEAD >

< TITLE >व्यायाम 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >टेक्स्ट दाईं ओर ग्राफ़िक्स के चारों ओर लपेटा गया है< / H1 >

चावल। 657. टेक्स्ट दाईं ओर की छवि के चारों ओर लपेटता है

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

परिभाषा 1

वेब पेज है पाठ फ़ाइल, HTML में बनाया गया और वर्ल्ड वाइड वेब (WWW) पर होस्ट किया गया। टेक्स्ट के अलावा, एक वेब पेज में हाइपरटेक्स्ट लिंक हो सकते हैं जिनके माध्यम से आप अन्य वेब पेजों पर नेविगेट कर सकते हैं और देख सकते हैं, साथ ही ग्राफिक्स, एनीमेशन, वीडियो क्लिप और संगीत के रूप में सम्मिलित कर सकते हैं।

HTML का उपयोग करके आप यह कर सकते हैं:

1. वेब पेज बनाएं और संपादित करें.
2. दस्तावेज़ में एम्बेडेड सभी वस्तुओं (चित्र, एनिमेशन, आदि) की कार्यप्रणाली को ध्यान में रखते हुए, इंटरनेट से HTML दस्तावेज़ संपादित करें।
3. हाइपरटेक्स्ट लिंक का उपयोग करना और चित्र, आरेख, एनिमेशन, वीडियो क्लिप, संगीत और भाषण संगत, टेक्स्ट विशेष प्रभावों को HTML दस्तावेज़ में एम्बेड करने की क्षमता, बनाना मल्टीमीडिया प्रस्तुतियाँ, स्लाइड शो, डेमो प्रोजेक्ट।

नोट 1

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

वेब पेज पर छवियाँ जोड़ना

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

आप छवि स्रोत टैग का उपयोग करके किसी पृष्ठ पर एक छवि जोड़ सकते हैं, जो इस प्रकार दिखता है:

टैग स्वयं कहाँ है, और scr इसकी विशेषता है। चूँकि scr विशेषता आवश्यक है, हम कह सकते हैं कि यह संपूर्ण प्रविष्टि एक सामान्य टैग है। छवि स्रोत टैग संबंधित समापन टैग का उपयोग नहीं करता है क्योंकि स्रोत टैग स्व-निहित है और इसलिए उपयोग किए जाने पर अंत में एक अनुगामी स्लैश की आवश्यकता होती है:।

वैकल्पिक कैप्शन जोड़ना

इंटरनेट पर, आप अक्सर विभिन्न शिलालेख पा सकते हैं जो तब प्रदर्शित होते हैं जब आप किसी वेब पेज पर किसी ग्राफिक ऑब्जेक्ट पर अपना माउस घुमाते हैं। इन कैप्शन में आमतौर पर छवि के बारे में या उस पृष्ठ के क्षेत्र के बारे में अतिरिक्त जानकारी होती है जिस पर वह स्थित है।

नीचे HTML कोड है जिसमें टैग के अंदर alt विशेषता जोड़ी गई है। यह विशेषता, src विशेषता के समान, ब्राउज़र को छवि के बारे में कुछ अतिरिक्त जानकारी बताती है और इसे हमेशा टैग के साथ संयोजन में भी उपयोग किया जा सकता है।

alt=' यह एक तस्वीर है!" />!}

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

प्रत्येक टैग के लिए ऑल्ट विशेषता का उपयोग करते समय, यह सावधान रहना महत्वपूर्ण है कि ग्राफ़िक तत्वों को अनुचित टेक्स्ट संदेश निर्दिष्ट न करें। उदाहरण के लिए, पेज डिज़ाइन तत्वों में वैकल्पिक टेक्स्ट लेबल जोड़ने का कोई मतलब नहीं है। ऐसी त्रुटियों से बचने के लिए, आप इन तत्वों की alt विशेषता को एक खाली मान (alt='') पर सेट कर सकते हैं। यदि आप कोई अन्य विशेषताएँ सेट नहीं करते हैं, तो ब्राउज़र छवि को उसके मूल आकार में प्रस्तुत करेगा, लेकिन छवि के शीर्ष किनारे को आसन्न टेक्स्ट स्ट्रिंग के शीर्ष किनारे के साथ संरेखित करेगा। हालाँकि, आप स्टाइलशीट टैग का उपयोग करके इन दोनों सेटिंग्स को बदल सकते हैं।

छवि गुण

टैग में ऐसी विशेषताएँ हैं जो आपको छवियों का आकार बदलने की अनुमति देती हैं। उनमें से कुछ यहां हैं:

• ऊंचाई - इसका उपयोग पिक्सेल या प्रतिशत में छवि की ऊंचाई निर्धारित करने के लिए किया जाता है;
• चौड़ाई - इसका उपयोग पिक्सेल या प्रतिशत में छवि की चौड़ाई निर्धारित करने के लिए किया जाता है।

छवि की ऊँचाई और चौड़ाई समायोजित करना

उपरोक्त विशेषताओं का उपयोग करके वेब पेजों पर रखी गई छवियों का आकार निर्धारित किया जा सकता है। इसके अलावा, उनके मान या तो निश्चित संख्या में पिक्सेल के रूप में, या पृष्ठ आकार के सापेक्ष प्रतिशत के रूप में सेट किए जाते हैं। नीचे दिए गए HTML कोड में, पहले टैग में मूल छवि के आयाम पिक्सेल में (60 पिक्सेल लंबवत और 60 पिक्सेल क्षैतिज रूप से) शामिल हैं, दूसरा टैग उसी छवि की चौड़ाई को पृष्ठ की चौड़ाई का 6% और ऊँचाई निर्धारित करता है पृष्ठ की ऊंचाई का 10%.

alt=''यह एक तस्वीर है!'' ऊंचाई='60' चौड़ाई='60' />

alt=''यह एक तस्वीर है!'' ऊँचाई='10%' चौड़ाई='6%' />

नोट 2

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

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

यह सुनिश्चित करने के लिए कि किसी भी स्क्रीन पर छवि, उसके रिज़ॉल्यूशन की परवाह किए बिना, पृष्ठ की चौड़ाई में एक निश्चित मात्रा में जगह घेरती है, प्रतिशत मानों का उपयोग करना आवश्यक है। यदि आप चाहते हैं कि चित्र का रिज़ॉल्यूशन स्थिर रहे (पिक्सेल में इसका आकार), तो आपको पिक्सेल में मानों का उपयोग करना होगा।

पाठ और ग्राफ़िक्स को संरेखित करना

किसी छवि को टेक्स्ट लाइन के दाएं या बाएं किनारे पर संरेखित करने के लिए, टैग की संरेखित विशेषता का उपयोग करें। उदाहरण के लिए:

alt=''यह एक तस्वीर है!'' ऊँचाई='60' चौड़ाई='60' संरेखित करें='दाएँ' />

किसी छवि को टेक्स्ट स्ट्रिंग के सापेक्ष लंबवत रूप से संरेखित करने के लिए, आप इस विशेषता का भी उपयोग कर सकते हैं, जो ऊपर, नीचे और केंद्र में मान ले सकता है। मान शीर्ष निर्दिष्ट करता है कि छवि के शीर्ष किनारे को आसपास के पाठ के शीर्ष किनारे के साथ संरेखित किया जाना चाहिए। वैल्यू बॉटम निर्दिष्ट करता है कि छवि के निचले किनारे को आसपास के पाठ के निचले किनारे के साथ संरेखित किया जाना चाहिए। केंद्र मान निर्दिष्ट करता है कि छवि का केंद्र पाठ पंक्ति के केंद्र के साथ संरेखित होना चाहिए।

छवियों को लिंक के रूप में उपयोग करना

छवियों का उपयोग अन्य दस्तावेज़ों के हाइपरलिंक बनाने के लिए भी किया जाता है। HTML में, एक छवि टेक्स्ट बॉक्स की तरह ही एक हाइपरलिंक बन जाती है। ऐसा करने के लिए, एक टैग का उपयोग किया जाता है जो एक पृष्ठ तत्व (हमारे मामले में, एक छवि) को घेरता है जिसे एक लिंक बनना चाहिए। इस छवि पर क्लिक करने पर लिंक का अनुसरण किया जाएगा।

थंबनेल छवियाँ

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

alt='सामान्य छवि देखने के लिए क्लिक करें।'

ऊंचाई='60' चौड़ाई='60' />

छवियों का सफलतापूर्वक उपयोग करने का रहस्य

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

पेज बनाते समय, आपको उन पर छोटी छवियां रखने का प्रयास करना चाहिए, क्योंकि बड़ी छवियों को लोड होने में लंबा समय लगेगा, और कुछ उपयोगकर्ता अभी भी नेटवर्क तक पहुंचने के लिए कम गति वाले संचार चैनलों का उपयोग करते हैं। THROUGHPUT, और इसलिए डाउनलोड की गई फ़ाइलों का आकार उनके लिए मौलिक महत्व का है।

नोट 3

संपूर्ण HTML दस्तावेज़ का समग्र फ़ाइल आकार भी महत्वपूर्ण है, जो बदले में, न केवल उसमें मौजूद छवियों के आकार पर निर्भर करेगा, बल्कि उनकी संख्या पर भी निर्भर करेगा। Alt विशेषता का उपयोग करते समय आपको सावधान रहने की आवश्यकता है ताकि पाठ संदेश की सामग्री हमेशा छवि से ही मेल खाए। और विपरीत स्थिति में: यह सुनिश्चित करना आवश्यक है कि छवि पृष्ठ पर प्रस्तुत पाठ जानकारी से मेल खाती है।

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

जैसा कि उल्लेख किया गया है, HTML आज वर्ल्ड वाइड वेब पर किसी भी वेब पेज को लिखने का आधार है। जब आप CSS का उपयोग करते हैं, तो HTML कोड बनाने से नाटकीय रूप से परिवर्तन होता है। आप केवल कुछ दृश्य प्रभावों को प्राप्त करने के लिए बेकार HTML टैग्स को दोबारा उपयोग करने को अलविदा कह सकते हैं। कुछ HTML टैग या विशेषताओं के बारे में, जैसे कि अप्रचलित टैग...

घर

एक वेबसाइट ऑर्डर करें और व्यवसाय करना शुरू करें!

यह वाक्यांश कई साइटों पर सुना और देखा जा सकता है, और यह व्यर्थ नहीं है!

वेबसाइट — यह कंपनी का चेहरा है. और यह संभावित उपभोक्ताओं के साथ संचार का सबसे आधुनिक और प्रभावी माध्यम है। केवल एक इंटरनेट साइट की क्षमताएं ही आपको उपयोगकर्ता को सूचना संदेश भेजने के सभी तरीकों का पूरी तरह से उपयोग करने की अनुमति देती हैं। उपभोक्ता को इनसे परिचित कराने के लिए टेक्स्ट, ऑडियो और वीडियो जानकारी एक ही साइट पर प्रस्तुत की जा सकती है।

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

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

HTML के सबसे महत्वपूर्ण लाभ हैं:

• सरलता, आपको कम से कम समय में HTML सीखने की अनुमति देती है।
• अपने स्वयं के वेब पेज बनाने की क्षमता
• और HTML आज मौजूद सभी प्लेटफार्मों पर बिल्कुल समान काम करता है, अतिरिक्त उपकरण खरीदने की कोई आवश्यकता नहीं है; और यह किसी भी उपलब्ध का उपयोग करने के लिए पर्याप्त है पाठ संपादक, उदाहरण के लिए नोटपैड।

इस साइट में, मैंने आपकी स्वयं की वेब साइट बनाने की पूरी प्रक्रिया का विस्तार से वर्णन करने का प्रयास किया है, अर्थात् सभी उपयोगकर्ताओं तक पहुंच प्रदान करने के लिए तैयार प्रोजेक्ट को इंटरनेट पर प्रकाशित करना।

मुझे उम्मीद है कि मेरे लेख कई लोगों के लिए बहुत उपयोगी होंगे, क्योंकि मैं खुद एक प्रोग्रामर नहीं हूं, लेकिन मैं इस काम से बहुत प्रेरित हूं।

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

आइए हम जिस वेब साइट का निर्माण कर रहे हैं उसके होम पेज पर माइक्रोसॉफ्ट ऑफिस में शामिल क्लिप आर्ट लाइब्रेरी से एक ग्राफिक छवि रखें। यह करने के लिए, इन उपायों का पालन करें:

1. बनाई गई वेब साइट खोलें.
2. खुला होम पेजपैनल में Index.htm फ़ाइल नाम पर डबल-क्लिक करके फ़ोल्डर सूची(फ़ोल्डर सूची).
3. मेनू पर डालना(सम्मिलित करें) कमांड का चयन करें चित्रकला चित्र(क्लिप आर्ट)। फ्रंटपेज प्रोग्राम विंडो में एक पैनल दिखाई देता है एक चित्र सम्मिलित करना(क्लिप आर्ट डालें)।
4. इस पैनल से कमांड का चयन करें चित्रों का संग्रह(मीडिया गैलरी)। एक संवाद बॉक्स खुलता है जो आपको एक ग्राफ़िक छवि चुनने की अनुमति देता है (चित्र 15.8)।

चावल। 15.8.

संवाद बॉक्स के शीर्ष पर, विंडो में दिखाए गए ऑब्जेक्ट के प्रदर्शन को नियंत्रित करने के साथ-साथ ऑब्जेक्ट की प्रतिलिपि बनाने और हटाने वाले बटनों के अलावा, असाइनमेंट बटन भी हैं (तालिका देखें)।

1. पैनल संग्रह की सूचीइसमें आपके कंप्यूटर के मल्टीमीडिया फ़ाइलों के साथ-साथ क्लिप आर्ट लाइब्रेरी चित्र फ़ाइलों वाले फ़ोल्डर शामिल हैं। जिस श्रेणी के चित्रों में आपकी रुचि है उसका फ़ोल्डर खोलें। इस श्रेणी की छवियाँ विंडो के कार्य क्षेत्र में दिखाई देंगी। जब आप किसी छवि पर कर्सर रखते हैं, तो एक संकेत दिखाई देता है जो छवि का नाम, आकार और उसमें मौजूद फ़ाइल के साथ-साथ ग्राफिक छवि के प्रारूप को दर्शाता है (चित्र 15.9)।

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

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

चावल। 15.10.

किसी फ़ाइल से ग्राफ़िक छवि लगाना

हमने क्लिप ऐट लाइब्रेरी से एक ग्राफिक छवि को एक वेब पेज पर रखने पर विचार किया। किसी फ़ाइल से ग्राफ़िक छवि को किसी पृष्ठ पर रखने के लिए, निम्न में से कोई एक कार्य करें:

• मेनू पर डालना(सम्मिलित करें) कमांड का चयन करें चित्रकला(चित्र), और फिर खुलने वाले सबमेनू में - विकल्प लेख्यपत्र से(लेख्यपत्र से)
• बटन को क्लिक करे किसी फ़ाइल से एक चित्र जोड़ें(फ़ाइल से चित्र सम्मिलित करें) मानक टूलबार पर
• बटन को क्लिक करे किसी फ़ाइल से एक चित्र जोड़ें(फ़ाइल से चित्र सम्मिलित करें) टूलबार पर चित्र(चित्र)

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

चावल। 15.11.

छवि गुण सेट करना

किसी वेब पेज पर एक छवि रखने के बाद, आपको संवाद बॉक्स का उपयोग करके उसके गुणों को कॉन्फ़िगर करना होगा चित्र गुण(चित्र गुण) (चित्र 15.12)। इसे खोलने के लिए, छवि पर क्लिक करें और फिर निम्न में से कोई एक कार्य करें:

• मेनू पर प्रारूप(प्रारूप) कमांड का चयन करें गुण(गुण)
• एक टीम चुनें संदर्भ मेनू चित्र गुण(चित्र गुण)
• कुंजी संयोजन दबाएँ +

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