पृष्ठ की पृष्ठभूमि के लिए एचटीएमएल कोड। html में स्टाइल डालें। सीएसएस के माध्यम से बॉडी टैग में शैली और छवि डालें

खैर, ठीक है ... यह तय करने का समय है कि हम किसकी पृष्ठभूमि पर लुभावने रूप से देखेंगे! और वह अद्भुत टैग कहां है जो इस व्यवसाय के लिए जिम्मेदार है? इसे चर्चा में रखने के लिए उसके पास क्या गुण हैं? और, सबसे महत्वपूर्ण बात, अपनी सारी सुंदरता कैसे रखें?

संक्षेप में, बहुत सारे प्रश्न हैं! और इसका केवल एक ही उत्तर है। खैर, ऐसा कोई टैग नहीं है! अभी तक यह पता नहीं चला है!

लेकिन परेशान मत हो! कोई टैग नहीं और कोई ज़रूरत नहीं! लेकिन हमें ज्ञात वर्णनकर्ता के दो अद्भुत गुण हैं तन. तो मिलिए किसी पुराने दोस्त से!

पृष्ठभूमि, या जैसा कि आमतौर पर कहा जाता है पृष्ठ - भूमिअंग्रेजी में अनुवादित मतलब पृष्ठभूमि. इसलिए, उनके सम्मान में बनाए गए दो सामानों को याद रखना आसान नहीं है। एक - पृष्ठभूमि, और दूसरा - बीजी रंग.

तो वे अलग कैसे हैं? उनके पास क्या अवसर हैं? और, सबसे महत्वपूर्ण बात, हमारे लिए क्या उपयोगी होगा?

आइए सबसे सरल से शुरू करते हैं - बीजी रंग. यह विशेषता पृष्ठभूमि के रंग के लिए जिम्मेदार है। आप रंग के शाब्दिक या संख्यात्मक मान में किसी भी मान को स्थानापन्न कर सकते हैं, और आपकी पृष्ठभूमि जादू की तरह रंगीन हो जाएगी।

खैर, एक उदाहरण के लिए, हम अपना टेम्प्लेट, या हमारे द्वारा पहले बनाई गई किसी भी फ़ाइल को खोल सकते हैं और पृष्ठ को अपने पसंदीदा रंग से भरने का प्रयास कर सकते हैं। मैं अपना पेज खोलूंगा index.htmlवी नोटपैड(नोटपैड) और निम्नलिखित परिवर्तन करें:

लिस्टिंग 11. index.html फ़ाइल

आइए अपनी रचना को उसी नाम से सहेजते हैं और देखते हैं कि क्या होता है:

मैं नीली पृष्ठभूमि पर हूं

यह विशेषता छवि के रंग को इंगित नहीं करती है, लेकिन वह चित्र जिसे पृष्ठभूमि के रूप में रखा जाना चाहिए, या, जैसा कि वे कहते हैं, पृष्ठभूमि वॉलपेपर। आप कोई भी वॉलपेपर चुन सकते हैं जो आपकी कल्पना आपको बताए। मेरी कल्पना ने मुझे एक तस्वीर लेने के लिए प्रेरित किया जिसमें मैं एक नई जैकेट में हूं। और इसलिए, आगे की हलचल के बिना, मैं अपनी फाइल खोलता हूं index.htmlऔर निम्नलिखित परिवर्तन करें:

लिस्टिंग 12. index.html फ़ाइल

हुर्रे! हैलो वर्ल्ड! नमस्कार मित्रों! मिलना!

इस फ़ाइल को सहेजें और देखें कि हमें क्या मिला

यह एक पृष्ठभूमि छवि है!

खैर, एक तरफ, इतने सारे लोगों को देखकर अच्छा लगता है स्मार्ट लोगएक जगह पर, लेकिन दूसरी तरफ... अच्छा, इतने सारे कहाँ??? हालाँकि, चुटकुले एक तरफ, आप समझ सकते हैं कि विशेषता ने क्या किया पृष्ठभूमि- उसने पूरी स्क्रीन को भरते हुए, मूल छवि को अभी-अभी लिया और गुणा किया।

लेकिन क्या एक तस्वीर को पूरी स्क्रीन पर अपलोड करना संभव है? मूल रूप से, आप कर सकते हैं! और हम अब इससे निपटेंगे। केवल एक चीज पर विचार करना छवि का आकार है। तो, 800 x 600 के स्क्रीन रिज़ॉल्यूशन पर, छवि के लिए खाली स्थान, यदि आप सभी ऊपर और नीचे के पैनल को घटाते हैं, तो 781 x 476 पिक्सेल रहता है। आइए इस छवि को लें।

इसलिए मैं फिर से प्रोग्राम खोलता हूं एडोब फोटोशॉप, मैं समुद्र की छवि के साथ एक तस्वीर चुनता हूं, इसके आयामों को वांछित 781 x 476 में समायोजित करता हूं, इसके लिए अनुकूलित करता हूं वेबऔर नाम के तहत सहेजें फोंटसी.जेपीजीआपके फोल्डर में तस्वीर. खैर, फिर, मैं पीटा पथ पर जाता हूं: मैं फाइल खोलता हूं index.htmlऔर निम्नलिखित परिवर्तन करें:

लिस्टिंग 13. index.html फ़ाइल

हुर्रे! हैलो वर्ल्ड! नमस्कार मित्रों! मिलना!

फिर से सेव करें और देखें रिजल्ट

और यहाँ वह है - समुद्र! खेलता है, खुली हवा में शोर करता है...

क्या यह सुंदर नहीं है? अब, अगर यह स्क्रीन रेज़ोल्यूशन सभी उपयोगकर्ताओं के लिए सेट किया गया था! लेकिन अफसोस! जैसे ही मैं संकल्प को 1152 x 864 तक बढ़ाता हूं, निम्न चित्र प्राप्त होता है:

दुख की बात है कि मैं इस प्रतिबिंब को देखता हूं ...

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

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

बेशक, आप बहुत ज्यादा परेशान नहीं कर सकते हैं, और इंटरनेट से तैयार पृष्ठभूमि की तस्वीरें ले सकते हैं, जहां वे बस साथ हैं। ऐसा करने के लिए, आप किसी भी खोज इंजन में टाइप कर सकते हैं ( www.yandex.ru, www.apport.ru, www.ramber.ruऔर कई अन्य) पोषित शब्द (पृष्ठभूमि, पृष्ठभूमि वॉलपेपर, पृष्ठभूमि) और आपकी सेवा में दर्जनों और दर्जनों साइटें दिखाई देंगी, जो आपको भगवान के लिए ये पृष्ठभूमि देने के लिए तैयार हैं, और जो विशेष रूप से सुखद है, पूरी तरह से नि: शुल्क।

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

और यही हम अभी करने जा रहे हैं।

अपना पहला वेब पेज बनाते समय, हमने उनके लिए एक सादे बैकग्राउंड का इस्तेमाल किया, जो टैग में उसके रंग को दर्शाता है bgcolor विशेषता का उपयोग करना। लेकिन बैकग्राउंड न केवल सादा हो सकता है, बल्कि तस्वीर या फोटो के रूप में भी हो सकता है। इस मामले में, किसी भी अन्य छवि की तरह, पृष्ठभूमि स्केच GIF, JPEG या PNG प्रारूप में होना चाहिए। किसी टैग में पृष्ठभूमि छवि निर्दिष्ट करने के लिए पृष्ठभूमि विशेषता का उपयोग किया जाता है, जिसका मान छवि फ़ाइल का नाम या URL है।

आइए अन्य.html फ़ाइल में वेब पेज की पृष्ठभूमि के रूप में विजेता.जेपीजी की रूपरेखा डालें, जिसे हमने पिछले प्रयोग में वेब फ़ोल्डर में सहेजा था।

Other.html फ़ाइल में, HTML तत्व को हटा दें।

उद्घाटन टैग के अंत में जोड़ें शैली पृष्ठभूमि-छवि: url ("विजेता। jpg"); ताकि टैग निम्नलिखित रूप लिया:

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

सीएसएस के साथ वेब पेज की पृष्ठभूमि

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

इससे पहले, हमने पहले वेब पेज पर कैस्केडिंग स्टाइल शीट भाषा का उपयोग करके टेक्स्ट की उपस्थिति निर्धारित की, टैग में शैली विशेषता के मूल्यों के रूप में वांछित शैलियों को निर्दिष्ट किया।<р>. लेकिन शैलियों को परिभाषित करने के लिए एक और अधिक वांछनीय विकल्प है, जिसमें शैलियों का विवरण वेब दस्तावेज़ के शीर्षक के अंदर रखा गया है। …उद्घाटन टैग मेंनिम्नलिखित प्रपत्र होना चाहिए:

आइए इस टैग को list.html फ़ाइल के HTML कोड में डालें।

Element के बाद list.html फाइल में एक खाली लाइन डालें और टैग दर्ज करें, जैसा कि ऊपर बताया गया है। वेब पेज हेडर एचटीएमएल कोड टैग के बीच संलग्न है …, इस तरह दिखना चाहिए:

और संकेतित कोड दर्ज करें जो शरीर तत्व की शैली को परिभाषित करता है।

एचटीएमएल तत्वइस तरह दिखना चाहिए:

list.html फाइल को सेव करें और इसे ब्राउजर प्रोग्राम में खोलें। आप देखेंगे कि आपके द्वारा पहले सेट की गई रंग पृष्ठभूमि को विजेता.जेपीजी फ़ाइल की छवि से बदल दिया गया है, और दस्तावेज़ की टेक्स्ट सामग्री अब नई पृष्ठभूमि पर प्रदर्शित होती है।

यदि टेक्स्ट को नई पृष्ठभूमि पर देखना कठिन है, तो टैग की टेक्स्ट विशेषता का उपयोग करके उसका रंग बदलें , जैसे, .

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

list.html फ़ाइल के HTML कोड में निर्दिष्ट गुण डालें ताकि तत्वनिम्नलिखित रूप लिया:

वेब (एचटीएमएल) पृष्ठ पर पृष्ठभूमि का पुनरुत्पादन

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

बैकग्राउंड-रिपीट प्रॉपर्टी में निम्नलिखित मान भी हो सकते हैं:

दोहराना- पृष्ठभूमि क्षैतिज और लंबवत दोनों तरह से दोहराती है; यह मान डिफ़ॉल्ट रूप से सेट है;

दोहराना x- पृष्ठभूमि केवल क्षैतिज रूप से दोहराई जाती है;

दोहराना- पृष्ठभूमि केवल लंबवत दोहराती है।

पृष्ठ पर पृष्ठभूमि छवि की स्थिति को पृष्ठभूमि-स्थिति विशेषता का उपयोग करके बदला जा सकता है। इस विशेषता के मान कीवर्ड हैं जो छवि की स्थिति को लंबवत रूप से दर्शाते हैं - शीर्ष (शीर्ष), केंद्र (केंद्र), नीचे (नीचे) - और क्षैतिज रूप से - बाएं (बाएं), केंद्र (केंद्र), दाएं (दाएं) . पहला होना चाहिए ऊर्ध्वाधर स्थिति. उदाहरण के लिए, पृष्ठभूमि-स्थिति: केंद्र केंद्र थंबनेल को पृष्ठ के केंद्र में क्षैतिज और लंबवत रूप से संरेखित करेगा।

संपत्ति जोड़ें पृष्ठभूमि-स्थिति: केंद्र केंद्र list.html फ़ाइल के मुख्य भाग के मापदंडों के विवरण के लिए। तत्त्वइस फाइल में निम्नलिखित रूप लेना चाहिए:

List.html फ़ाइल का HTML कोड इस तरह दिखना चाहिए: