नेस्टिंग साइट: कैसे पृष्ठभूमि चित्र बनाने के लिए एचटीएमएल

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

मूल HTML टैग पृष्ठभूमि बनाने के लिए

तो, हम कैसे स्क्रीन पर html में पृष्ठभूमि छवि बनाने के लिए के सवाल पर जाएं। आदेश सुंदर साइट देखने के लिए में, आप एक नहीं बल्कि महत्वपूर्ण विस्तार को समझना चाहिए: यह पर्याप्त सिर्फ एक ढाल पृष्ठभूमि बनाने या इसे एक ठोस रंग पेंट करने के लिए है, लेकिन अगर आप पृष्ठभूमि चित्र सम्मिलित करने की आवश्यकता है, यह नजर रखने की पूरी चौड़ाई खिंचाव नहीं होंगे। छवि लेने या इस विस्तार है, जिसमें आप साइट के पृष्ठ प्रदर्शित करेगा के साथ अपने स्वयं के डिजाइन बनाने के लिए मूल रूप से जरूरी हो गया था। केवल जब पृष्ठभूमि छवि के लिए तैयार है, यह नाम दिया «छवियाँ» एक फ़ोल्डर में खींचें। यह में, हम सभी का इस्तेमाल किया छवियों, एनिमेशन और अन्य ग्राफिक फ़ाइलों को स्टोर होगा। इस फ़ोल्डर में अपने सभी एचटीएमएल फाइलों के साथ रूट निर्देशिका में स्थित होना चाहिए। अब आप पर और कोड करने के लिए स्थानांतरित कर सकते हैं। वहाँ लेखन कोड के लिए कई विकल्प है, जिसके द्वारा पृष्ठभूमि चित्र बदल जाएगा।

1. टैग विशेषता लिखें।
2. एचटीएमएल कोड में सीएसएस शैली के माध्यम से।
3. एक अलग फ़ाइल में सीएसएस शैलियों लिखें।

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

1. टैग विशेषता (शरीर) index.htm फ़ाइल में के माध्यम से पहली रिकॉर्डिंग विधि। (शरीर पृष्ठभूमि = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ शरीर): यह इस रूप में संग्रहीत किया जाता है। यही कारण है, अगर हम शीर्षक «चित्र» और विस्तार जेपीजी, और फ़ोल्डर हम «छवियाँ», फिर HTML कोड प्रविष्टि इस तरह दिखेगा नामित के साथ एक तस्वीर है: (शरीर पृष्ठभूमि = "छवियाँ / picture.jpg") ... (/ शरीर) ।
2. दूसरी विधि एक सीएसएस शैली रिकॉर्डिंग शामिल है, लेकिन यह नाम index.htm के साथ एक ही फाइल में लिखा है। (शारीरिक शैली = "पृष्ठभूमि: यूआरएल ( '../ छवियाँ / picture.jpg')")।
3. रिकॉर्डिंग के तीसरे विधि दो फ़ाइलों में किया जाता है। (सिर) (लिंक rel = "स्टाइलशीट" type = "text / css" href = "http: // साइट / लेख / 193,110 /% D0% 9 फ नाम index.htm टैग (सिर) के साथ दस्तावेज़ इस तरह के एक लाइन में लिखा है % डी 1% 83% डी 1% 82% डी 1% 8C_% D0% बीए CSS_faylu ") (/ सिर)। एक फाइल बुलाया style.css शैली पहले से ही लिखें: शरीर {पृष्ठभूमि: यूआरएल (छवियाँ / picture.jpg ')}।

एचटीएमएल पृष्ठभूमि छवि बनाने के लिए के रूप में, हम समझते हैं। अब आप यह पता लगाने की पूरी स्क्रीन की चौड़ाई में छवि को फैलाने के लिए कैसे की जरूरत है।

तरीके खिड़की की चौड़ाई के लिए पृष्ठभूमि छवि को फैलाने के

हम एक प्रतिशत के रूप में हमारे स्क्रीन प्रतिनिधित्व करते हैं। ऐसा लगता है कि पूरी चौड़ाई और स्क्रीन की लंबाई × 100% 100% हो जाएगा। हम इस चौड़ाई के छवि को फैलाने की जरूरत है। छवि फ़ाइल रिकॉर्डिंग style.css लाइन है कि पूरे चौड़ाई और मॉनिटर की लंबाई से अधिक छवि को फैलाने जाएगा में जोड़े। यह सीएसएस शैली में लिखा है के रूप में? यह आसान है!

शव

{

पृष्ठभूमि: यूआरएल (छवियाँ / picture.jpg ')

पृष्ठभूमि आकार: 100%; / * इस पोस्ट में अधिकांश आधुनिक ब्राउज़र के लिए उपयुक्त है * /

}

इसलिए हम पता लगा कि कैसे स्क्रीन पर html में एक तस्वीर पृष्ठभूमि बनाने के लिए। वहाँ भी index.htm फ़ाइल में रिकॉर्डिंग की एक विधि है। इस विधि और पुरानी हालांकि, लेकिन शुरुआती के लिए यह आवश्यक जानते हैं और समझने के लिए है। टैग (सिर) (शैली) div {पृष्ठभूमि का आकार: कवर; } (/ स्टाइल) (/ सिर), इस रिकॉर्ड मतलब है कि हम पृष्ठभूमि है, जो खिड़की की पूरी चौड़ाई के ऊपर स्थित हो जाएगा के लिए एक विशेष इकाई का आवंटन। हम दो तरीकों, कैसे एक पृष्ठभूमि चित्र एचटीएमएल साइट बनाने के लिए, ताकि छवि आधुनिक ब्राउज़रों में से किसी में स्क्रीन की पूरी चौड़ाई को बढ़ाया है पर विचार किया है।

एक निश्चित पृष्ठभूमि बनाने के लिए

आप भविष्य वेब संसाधन की पृष्ठभूमि के रूप में एक छवि का इस्तेमाल करने का फैसला करते हैं, तो आप सिर्फ जानना चाहता है कि यह कैसे तय करने के लिए, इतना है कि यह लंबाई में नहीं फैला है और सौंदर्य उपस्थिति को खराब नहीं था की जरूरत है। बस एक छोटा सा अलावा रजिस्टर करने के लिए HTML कोड का उपयोग करके। आप पृष्ठभूमि के बाद एक वाक्यांश जोड़ने के लिए style.css फ़ाइल की जरूरत है: यूआरएल (छवियाँ / picture.jpg ') तय; या बजाय के बाद अर्धविराम अलग लाइन जोड़ा - स्थिति: तय की। इस प्रकार, अपने वॉलपेपर तय की जाएगी। साइट पर सामग्री स्क्रॉल के दौरान, आप उस पाठ लाइनों आगे बढ़ रहे हैं देखेंगे, लेकिन पृष्ठभूमि जगह में बनी हुई है। तो अगर आप एचटीएमएल पृष्ठभूमि छवि कैसे करना है, जो कई तरह से सीखा है।

HTML में टेबल्स के साथ कार्य करना

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

पृष्ठभूमि के बजाय एक तस्वीर के साथ तालिका: एचटीएमएल उदाहरण

एक 2x3 तालिका ड्रा और यह पृष्ठभूमि छवि फ़ोल्डर "छवियां" में जमा हो जाती है: (तालिका पृष्ठभूमि = "छवियाँ / picture.jpg") (टीआर) (टीडी) 1 (/ टीडी) (टीडी) 2 (/ टीडी) (टीडी) 3) (/ टीडी) (/ tr) (tr) (टीडी) 4 (/ टीडी) (टीडी) 5 (/ टीडी) (टीडी) 6 (/ टीडी) (/ tr) (/ तालिका)। इसलिए हमारे तालिका चित्र की पृष्ठभूमि में तैयार किया जाएगा।

अब 2x3 का एक ही थाली के आकार आकर्षित है, लेकिन कॉलम गिने 1, 4, 5 और 6 (टेबल) (tr) में एक तस्वीर (टीडी पृष्ठभूमि = "छवियाँ / picture.jpg") 1 (/ टीडी) (टीडी) 2 सम्मिलित (/ टीडी) (टीडी) 3 (/ टीडी) (/ tr) (tr) (टीडी पृष्ठभूमि = "छवियाँ / picture.jpg") 4 (/ टीडी) (टीडी पृष्ठभूमि = "छवियाँ / picture.jpg") 5 ( / td) (टीडी पृष्ठभूमि = "छवियाँ / picture.jpg") 6 (/ टीडी) (/ tr) (/ तालिका)। देख हम देख सकते हैं कि पृष्ठभूमि केवल उन कोशिकाओं जिसमें हम पंजीकृत है, और नहीं पूरे तालिका में आ जाने के बाद।

क्रॉस-ब्राउज़र संगतता साइट

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