टेबललेस वेब डिज़ाइन: Difference between revisions

From Vigyanwiki
No edit summary
No edit summary
Line 2: Line 2:
{{CSS}}
{{CSS}}


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


== इतिहास ==
== इतिहास ==
HTML एक [[ पाठ के प्रस्तुतिकरण के लिए प्रयुक्त भाषा ]] है जिसका विजुअल प्रेजेंटेशन शुरू में यूजर पर छोड़ दिया गया था। हालाँकि, 1990 के दशक के मध्य में जैसे-जैसे अकादमिक और शोध की दुनिया से [[इंटरनेट]] का विस्तार हुआ, और अधिक मीडिया उन्मुख हो गया, ग्राफिक डिजाइनरों ने अपने वेब पेजों के दृश्य स्वरूप को नियंत्रित करने के तरीकों की तलाश की। जैसा कि विशेष रूप से डिजाइनर [[डेविड सीगल (उद्यमी)]] ने अपनी पुस्तक क्रिएटिंग किलर वेब साइट्स में लोकप्रिय किया, पेज लेआउट बनाने और बनाए रखने के लिए टेबल और [[स्पेसर [[जीआईएफ]]]] (सामान्यतः स्पष्ट रूप से निर्दिष्ट चौड़ाई, ऊंचाई या मार्जिन के साथ पारदर्शी एकल पिक्सेल जीआईएफ चित्र) का उपयोग किया गया था।<ref>{{Cite news| last = Gruber| first = Jordan S.| title = साइट से बाहर| work = Wired| date = 1997-02-01| url = https://www.wired.com/1997/02/outta-site/}}</ref>
एचटीएमएल [[ पाठ के प्रस्तुतिकरण के लिए प्रयुक्त भाषा |पाठ के प्रस्तुतिकरण के लिए प्रयुक्त भाषा]] है। जिसका वैकल्पिक प्रस्तुति प्रारंभ में उपयोगकर्ता पर छोड़ दिया गया था। चूँकि सन् 1990 के दशक के मध्य में जैसे-जैसे अकादमिक और शोध की दुनिया से [[इंटरनेट]] का विस्तार हुआ था और अधिक मीडिया उन्मुख हो गया था। जिससे कि ग्राफिक डिजाइनरों ने अपने वेब पेजों के दृश्य स्वरूप को नियंत्रित करने के विधियों की तलाश की थी। जैसा कि विशेष रूप से डिजाइनर [[डेविड सीगल (उद्यमी)]] ने अपनी पुस्तक क्रिएटिंग किलर वेब साइट्स में लोकप्रिय किया गया था। सामान्यतः पेज लेआउट बनाने और बनाए रखने के लिए टेबल और स्पेसर [[जीआईएफ]] (सामान्यतः स्पष्ट रूप से निर्दिष्ट चौड़ाई, ऊंचाई या मार्जिन के साथ पारदर्शी एकल पिक्सेल जीआईएफ चित्र) का उपयोग किया गया था।<ref>{{Cite news| last = Gruber| first = Jordan S.| title = साइट से बाहर| work = Wired| date = 1997-02-01| url = https://www.wired.com/1997/02/outta-site/}}</ref>
1990 के दशक के अंत में पहले उचित रूप से शक्तिशाली [[WYSIWYG]] संपादक बाजार में आए, जिसका अर्थ था कि वेब डिजाइनरों को अब वेब पेज बनाने के लिए HTML की तकनीकी समझ की आवश्यकता नहीं है।<ref>{{cite web|last1=Maas|first1=Benard|title=WYSIWYG संपादकों का संक्षिप्त इतिहास|url=http://1percentmarketingwebdesign.com/brief-history-wysiwyg-editors/|publisher=1PMWD|access-date=10 February 2015|quote=Microsoft Office FrontPage was released as a bundle of the 1997 version of the Microsoft Office, it was the first time that a robust, commercial HTML WYSIWYG editor-and-publisher was available for every person to use... When a webpage built out of the WYSIWYG MS FrontPage software would run with a backend FPSE in place it would enjoy the full strength that a technologist could possibly build by writing HTML code from scratch. Web designers no longer needed a technical understanding of HTML to build web pages.}}</ref> ऐसे संपादकों ने अप्रत्यक्ष रूप से डिजाइन तत्वों को स्थान देने के लिए नेस्टेड तालिकाओं के व्यापक उपयोग को प्रोत्साहित किया। जैसा कि डिजाइनरों ने इन संपादकों में अपने दस्तावेज़ संपादित किए, दस्तावेज़ में अनावश्यक कोड और खाली तत्व जोड़े गए। इसके अतिरिक्त, WYSIWYG संपादक का उपयोग करते समय अकुशल डिजाइनरों द्वारा आवश्यकता से अधिक तालिकाओं का उपयोग करने की संभावना थी। इस अभ्यास ने अधिकांशतः तालिकाओं के भीतर नेस्टेड कई तालिकाओं के साथ-साथ अनावश्यक पंक्तियों और स्तंभों वाली तालिकाओं का नेतृत्व किया। स्लाइसिंग टूल के साथ ग्राफ़िक संपादकों का उपयोग जो HTML और छवियों को सीधे आउटपुट करता है, अधिकांशतः 1 पिक्सेल ऊंचाई या चौड़ाई की कई पंक्तियों वाली तालिकाओं के साथ खराब कोड को भी बढ़ावा देता है। कभी-कभी वास्तविक सामग्री की तुलना में सामग्री को प्रस्तुत करने के लिए कोड की कई और पंक्तियों का उपयोग किया जाता था।


लेआउट उद्देश्यों के लिए तालिकाओं पर निर्भरता के कारण कई समस्याएं उत्पन्न हुई हैं। कई वेब पेजों को तालिकाओं के भीतर नेस्टेड तालिकाओं के साथ डिज़ाइन किया गया था, जिसके परिणामस्वरूप बड़े HTML दस्तावेज़ सरल स्वरूपण वाले दस्तावेज़ों की तुलना में अधिक बैंडविड्थ का उपयोग करते हैं। इसके अतिरिक्त, जब एक तालिका-आधारित लेआउट को रेखीयकृत किया जाता है, उदाहरण के लिए जब एक स्क्रीन रीडर या एक खोज इंजन द्वारा पार्स किया जा रहा हो, तो सामग्री का परिणामी क्रम कुछ गड़बड़ और भ्रामक हो सकता है।
सन् 1990 के दशक के अंत में पहले उचित रूप से शक्तिशाली [[WYSIWYG]] [[(विसीविग)]] संपादक बाजार में आए थे। जिसका अर्थ यह था कि वेब डिजाइनरों को अब वेब पेज बनाने के लिए एचटीएमएल की तकनीकी समझ की आवश्यकता नहीं है।<ref>{{cite web|last1=Maas|first1=Benard|title=WYSIWYG संपादकों का संक्षिप्त इतिहास|url=http://1percentmarketingwebdesign.com/brief-history-wysiwyg-editors/|publisher=1PMWD|access-date=10 February 2015|quote=Microsoft Office FrontPage was released as a bundle of the 1997 version of the Microsoft Office, it was the first time that a robust, commercial HTML WYSIWYG editor-and-publisher was available for every person to use... When a webpage built out of the WYSIWYG MS FrontPage software would run with a backend FPSE in place it would enjoy the full strength that a technologist could possibly build by writing HTML code from scratch. Web designers no longer needed a technical understanding of HTML to build web pages.}}</ref> चूँकि ऐसे संपादकों ने अप्रत्यक्ष रूप से डिजाइन तत्वों को स्थान देने के लिए नेस्टेड तालिकाओं के व्यापक उपयोग को प्रोत्साहित किया गया था। जैसा कि डिजाइनरों ने इन संपादकों में अपने दस्तावेज़ संपादित किए है और दस्तावेज़ में अनावश्यक कोड और खाली तत्व जोड़े गए है। इसके अतिरिक्त WYSIWYG (विसीविग) संपादक का उपयोग करते समय अकुशल डिजाइनरों द्वारा आवश्यकता से अधिक तालिकाओं का उपयोग करने की संभावना थी। इस अभ्यास ने अधिकांशतः तालिकाओं के अंदर नेस्टेड कई तालिकाओं के साथ-साथ अनावश्यक पंक्तियों और स्तंभों वाली तालिकाओं का नेतृत्व किया गया था। चूँकि स्लाइसिंग टूल के साथ ग्राफ़िक संपादकों का उपयोग जो एचटीएमएल और छवियों को सीधे आउटपुट करता है और अधिकांशतः 1 पिक्सेल ऊंचाई या चौड़ाई की कई पंक्तियों वाली तालिकाओं के साथ खराब कोड को भी बढ़ावा देता है। अतः कभी-कभी वास्तविक सामग्री की तुलना में सामग्री को प्रस्तुत करने के लिए कोड की कई पंक्तियों का उपयोग किया जाता था।


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


== दत्तक ग्रहण ==
== दत्तक ग्रहण ==
CSS1 विनिर्देश दिसंबर 1996 में [[विश्वव्यापी वेब संकाय]] द्वारा प्रकाशित किया गया था<ref>{{Cite web| last1 = Lie| first1 = Håkon Wium| last2 = Bos| first2 = Bert| title = W3C Recommendation: Cascading Style Sheets, Level 1| work = W3C| access-date = 2019-04-19| date = 1996-12-17| url = http://www.w3.org/TR/REC-CSS1| archive-url = https://web.archive.org/web/19970605031453/http://www.w3.org/TR/REC-CSS1| url-status = dead| archive-date = 1997-06-05}}</ref> [[वेब पहुंच]] में सुधार के उद्देश्य से और HTML दस्तावेज़ों में शब्दार्थ#कंप्यूटर विज्ञान सामग्री से स्टाइल शीट में प्रस्तुतिकरण विवरण को अलग करने पर बल देना। मई 1998 में CSS2 (बाद में CSS 2.1 और CSS 2.2 में संशोधित) ने स्थिति और टेबल लेआउट के लिए सुविधाओं के साथ CSS1 का विस्तार किया।
सीएसएस1 विनिर्देश दिसंबर सन् 1996 में [[विश्वव्यापी वेब संकाय]] द्वारा प्रकाशित किया गया था।<ref>{{Cite web| last1 = Lie| first1 = Håkon Wium| last2 = Bos| first2 = Bert| title = W3C Recommendation: Cascading Style Sheets, Level 1| work = W3C| access-date = 2019-04-19| date = 1996-12-17| url = http://www.w3.org/TR/REC-CSS1| archive-url = https://web.archive.org/web/19970605031453/http://www.w3.org/TR/REC-CSS1| url-status = dead| archive-date = 1997-06-05}}</ref> [[वेब पहुंच]] में सुधार के उद्देश्य से और एचटीएमएल दस्तावेज़ों में शब्दार्थ कंप्यूटर विज्ञान सामग्री से स्टाइल शीट में प्रस्तुतिकरण विवरण को अलग करने पर बल देना। मई 1998 में सीएसएस2 (बाद में सीएसएस 2.1 और सीएसएस 2.2 में संशोधित) ने स्थिति और टेबल लेआउट के लिए सुविधाओं के साथ सीएसएस1 का विस्तार किया।


संपूर्ण वेब पेजों के लेआउट को नियंत्रित करने के लिए CSS के अतिरिक्त HTML तालिकाओं का उपयोग करने की प्राथमिकता कई कारणों से थी:
संपूर्ण वेब पेजों के लेआउट को नियंत्रित करने के लिए सीएसएस के अतिरिक्त एचटीएमएल तालिकाओं का उपयोग करने की प्राथमिकता कई कारणों से थी:
* सामग्री प्रकाशकों की अपनी वेब साइट पर अपने उपस्तिथ [[कॉर्पोरेट डिजाइन]] तत्वों को दोहराने की इच्छा;
* सामग्री प्रकाशकों की अपनी वेब साइट पर अपने उपस्तिथ [[कॉर्पोरेट डिजाइन]] तत्वों को दोहराने की इच्छा;
* ब्राउज़रों में CSS समर्थन के समय की सीमाएँ;
* ब्राउज़रों में सीएसएस समर्थन के समय की सीमाएँ;
* उन ब्राउज़रों का [[स्थापित आधार]] जो CSS का समर्थन नहीं करते;
* उन ब्राउज़रों का [[स्थापित आधार]] जो सीएसएस का समर्थन नहीं करते;
* नए वेब डिजाइनरों को सीएसएस मानकों की जानकारी नहीं है;
* नए वेब डिजाइनरों को सीएसएस मानकों की जानकारी नहीं है;
* सीएसएस का उपयोग करने के कारणों ([[एचटीएमएल]] [[सेमांटिक वेब]] और वेब एक्सेसिबिलिटी सहित) के बारे में ज्ञान की कमी, या चिंताओं के लिए सीएसएस का उपयोग करने के अतिरिक्त इच्छित लेआउट को जल्दी से प्राप्त करने के लिए एक आसान तरीका माना जाता था, और
* सीएसएस का उपयोग करने के कारणों ([[एचटीएमएल]] [[सेमांटिक वेब]] और वेब एक्सेसिबिलिटी सहित) के बारे में ज्ञान की कमी, या चिंताओं के लिए सीएसएस का उपयोग करने के अतिरिक्त इच्छित लेआउट को जल्दी से प्राप्त करने के लिए आसान विधि माना जाता था, और
* WYSIWYG वेब डिज़ाइन टूल की एक नई नस्ल जिसने इस अभ्यास को प्रोत्साहित किया।
* WYSIWYG वेब डिज़ाइन टूल की नई नस्ल जिसने इस अभ्यास को प्रोत्साहित किया।


सीएसएस-आधारित लेआउट को अपनाने में लैंडमार्क में फरवरी 2001 का वेब मानक प्रोजेक्ट का ब्राउज़र अपग्रेड अभियान और वेब डिज़ाइन पत्रिका [[एक सूची अलग]] का एक साथ नया डिज़ाइन सम्मिलित है, जिसके बाद 2002 में [[वायर्ड (पत्रिका)]] का नया स्वरूप सम्मिलित है।<ref>{{Cite book| edition = 1st| publisher = New Riders| isbn = 978-0-7357-1201-0| last = Zeldman| first = Jeffrey| title = वेब मानकों के साथ डिजाइनिंग| location = Indianapolis| date = 2003-05-14| pages = [https://archive.org/details/designingwithweb00zeld/page/120 120-134]| url-access = registration| url = https://archive.org/details/designingwithweb00zeld/page/120}}</ref> 2003 में शुरू की गई [[सीएसएस ज़ेन गार्डन]] वेबसाइट को टेबललेस लेआउट को लोकप्रिय बनाने का श्रेय दिया जाता है।<ref>{{Cite book| edition = 2nd| publisher = New Riders| isbn = 978-0-321-38555-0| last = Zeldman| first = Jeffrey| title = वेब मानकों के साथ डिजाइनिंग| location = Berkeley| date = 2007| page = [https://archive.org/details/designingwithweb0000zeld_0/page/137 137]| url = https://archive.org/details/designingwithweb0000zeld_0/page/137}}</ref>
सीएसएस-आधारित लेआउट को अपनाने में लैंडमार्क में फरवरी 2001 का वेब मानक प्रोजेक्ट का ब्राउज़र अपग्रेड अभियान और वेब डिज़ाइन पत्रिका [[एक सूची अलग|सूची अलग]] का साथ नया डिज़ाइन सम्मिलित है, जिसके बाद 2002 में [[वायर्ड (पत्रिका)]] का नया स्वरूप सम्मिलित है।<ref>{{Cite book| edition = 1st| publisher = New Riders| isbn = 978-0-7357-1201-0| last = Zeldman| first = Jeffrey| title = वेब मानकों के साथ डिजाइनिंग| location = Indianapolis| date = 2003-05-14| pages = [https://archive.org/details/designingwithweb00zeld/page/120 120-134]| url-access = registration| url = https://archive.org/details/designingwithweb00zeld/page/120}}</ref> 2003 में प्रारंभ की गई [[सीएसएस ज़ेन गार्डन]] वेबसाइट को टेबललेस लेआउट को लोकप्रिय बनाने का श्रेय दिया जाता है।<ref>{{Cite book| edition = 2nd| publisher = New Riders| isbn = 978-0-321-38555-0| last = Zeldman| first = Jeffrey| title = वेब मानकों के साथ डिजाइनिंग| location = Berkeley| date = 2007| page = [https://archive.org/details/designingwithweb0000zeld_0/page/137 137]| url = https://archive.org/details/designingwithweb0000zeld_0/page/137}}</ref>




== औचित्य ==
== औचित्य ==
HTML तालिकाओं का अभीष्ट और शब्दार्थ उद्देश्य प्रस्तुत करने वाली [[तालिका (सूचना)]] में निहित है<ref name="Kyrnin">
एचटीएमएल तालिकाओं का अभीष्ट और शब्दार्थ उद्देश्य प्रस्तुत करने वाली [[तालिका (सूचना)]] में निहित है<ref name="Kyrnin">
{{cite web
{{cite web
| url=http://webdesign.about.com/od/tables/a/aa122605.htm
| url=http://webdesign.about.com/od/tables/a/aa122605.htm
Line 51: Line 52:
| access-date = 2007-09-08
| access-date = 2007-09-08
}}</ref>
}}</ref>
पृष्ठ लेआउट के लिए सीएसएस का उपयोग करने के लाभों में विभिन्न प्रकार के [[उपयोगकर्ता एजेंट]]ों का उपयोग करके उपयोगकर्ताओं की व्यापक विविधता के लिए सूचना की बेहतर पहुंच सम्मिलित है। बड़ी संख्या में शब्दार्थ अर्थहीन के रूप में बैंडविड्थ बचत होती है {{tag|table|o}}, {{tag|tr|o}} और {{tag|td|o}} टैग दर्जनों पृष्ठों से हटा दिए जाते हैं, लेकिन कम, लेकिन अधिक अर्थपूर्ण शीर्षक, पैराग्राफ और सूचियां छोड़ दी जाती हैं। लेआउट निर्देश साइट-व्यापी CSS स्टाइलशीट में स्थानांतरित किए जाते हैं, जो एक बार [[HTTP]] हो सकते हैं और वेब [[कैश]] पुन: उपयोग के लिए हो सकते हैं, जबकि प्रत्येक आगंतुक साइट पर नेविगेट करता है। साइटें अधिक रख-रखाव योग्य हो सकती हैं क्योंकि विशिष्ट CSS के मार्क-अप को बदलकर, उस स्टाइलशीट पर निर्भर प्रत्येक पृष्ठ को प्रभावित करके पूरी साइट को केवल एक ही पास में रीस्टाइल या री-ब्रांड किया जा सकता है। नई HTML सामग्री को इस तरह से जोड़ा जा सकता है कि बिना किसी और प्रयास के उपस्तिथ सीएसएस द्वारा लगातार लेआउट नियम तुरंत प्रयुक्त किए जाते हैं।
पृष्ठ लेआउट के लिए सीएसएस का उपयोग करने के लाभों में विभिन्न प्रकार के [[उपयोगकर्ता एजेंट]]ों का उपयोग करके उपयोगकर्ताओं की व्यापक विविधता के लिए सूचना की उत्तम पहुंच सम्मिलित है। बड़ी संख्या में शब्दार्थ अर्थहीन के रूप में बैंडविड्थ बचत होती है {{tag|table|o}}, {{tag|tr|o}} और {{tag|td|o}} टैग अंकितनों पृष्ठों से हटा दिए जाते हैं, किन्तु कम, किन्तु अधिक अर्थपूर्ण शीर्षक, पैराग्राफ और सूचियां छोड़ दी जाती हैं। लेआउट निर्देश साइट-व्यापी सीएसएस स्टाइलशीट में स्थानांतरित किए जाते हैं, जो बार [[HTTP]] हो सकते हैं और वेब [[कैश]] पुन: उपयोग के लिए हो सकते हैं, जबकि प्रत्येक आगंतुक साइट पर नेविगेट करता है। साइटें अधिक रख-रखाव योग्य हो सकती हैं क्योंकि विशिष्ट सीएसएस के मार्क-अप को बदलकर, उस स्टाइलशीट पर निर्भर प्रत्येक पृष्ठ को प्रभावित करके पूरी साइट को केवल ही पास में रीस्टाइल या री-ब्रांड किया जा सकता है। नई एचटीएमएल सामग्री को इस तरह से जोड़ा जा सकता है कि बिना किसी और प्रयास के उपस्तिथ सीएसएस द्वारा लगातार लेआउट नियम तुरंत प्रयुक्त किए जाते हैं।


== लाभ ==
== लाभ ==
Line 58: Line 59:
{{main|Web accessibility|Search engine optimization}}
{{main|Web accessibility|Search engine optimization}}


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


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


डिजाइन (सीएसएस) और संरचना (एचटीएमएल) के पृथक्करण के परिणामस्वरूप, विभिन्न उपकरणों के लिए अलग-अलग लेआउट प्रदान करना भी संभव है, उदा। [[ तरकीब अपने हाथ में है ]], मोबाइल फोन इत्यादि। प्रिंट के लिए एक अलग स्टाइल शीट निर्दिष्ट करना भी संभव है, उदा। उन विज्ञापनों या नेविगेशन तत्वों की उपस्थिति को छिपाने या संशोधित करने के लिए जो अप्रासंगिक हैं और पृष्ठ के प्रिंट करने योग्य संस्करण में परेशानी पैदा करते हैं।
डिजाइन (सीएसएस) और संरचना (एचटीएमएल) के पृथक्करण के परिणामस्वरूप, विभिन्न उपकरणों के लिए अलग-अलग लेआउट प्रदान करना भी संभव है, उदा। [[ तरकीब अपने हाथ में है |तरकीब अपने हाथ में है]] , मोबाइल फोन इत्यादि। प्रिंट के लिए अलग स्टाइल शीट निर्दिष्ट करना भी संभव है, उदा। उन विज्ञापनों या नेविगेशन तत्वों की उपस्थिति को छिपाने या संशोधित करने के लिए जो अप्रासंगिक हैं और पृष्ठ के प्रिंट करने योग्य संस्करण में परेशानी उत्पन्न करते हैं।


W3C के [[ वेब सामग्री अभिगम्यता दिशानिर्देश ]] के दिशानिर्देश सं। 3 राज्य मार्कअप और स्टाइल शीट का उपयोग करते हैं और ठीक से करते हैं।<ref>
W3C के [[ वेब सामग्री अभिगम्यता दिशानिर्देश |वेब सामग्री अभिगम्यता दिशानिर्देश]] के दिशानिर्देश सं। 3 राज्य मार्कअप और स्टाइल शीट का उपयोग करते हैं और ठीक से करते हैं।<ref>
{{cite web
{{cite web
| url=http://www.w3.org/TR/WAI-WEBCONTENT/#gl-structure-presentation
| url=http://www.w3.org/TR/WAI-WEBCONTENT/#gl-structure-presentation
Line 73: Line 74:
| access-date=2009-09-19
| access-date=2009-09-19
}}</ref>
}}</ref>
दिशानिर्देश का चेकपॉइंट 3.3, एक प्राथमिकता-2 चेकपॉइंट, कहता है कि लेआउट और प्रस्तुति को नियंत्रित करने के लिए स्टाइल शीट का उपयोग करें।<ref>
दिशानिर्देश का चेकपॉइंट 3.3, प्राथमिकता-2 चेकपॉइंट, कहता है कि लेआउट और प्रस्तुति को नियंत्रित करने के लिए स्टाइल शीट का उपयोग करें।<ref>
{{cite web
{{cite web
| url=http://www.w3.org/TR/WCAG10-TECHS/#tech-style-sheets
| url=http://www.w3.org/TR/WCAG10-TECHS/#tech-style-sheets
Line 85: Line 86:


=== बैंडविड्थ बचत ===
=== बैंडविड्थ बचत ===
टेबललेस डिज़ाइन कम HTML टैग वाले वेब पेज बनाता है जो पूरी तरह से सामग्री की स्थिति के लिए उपयोग किए जाते हैं। इसका सामान्यतः मतलब है कि पेज डाउनलोड करने के लिए खुद छोटे हो जाते हैं। दर्शन का तात्पर्य है कि लेआउट और पोजिशनिंग के संबंध में सभी निर्देश बाहरी स्टाइल शीट्स में स्थानांतरित किए जाएं। एचटीटीपी की मूलभूत क्षमताओं के अनुसार, क्योंकि ये शायद ही कभी बदलते हैं और वे कई वेब पेजों पर सामान्यतः प्रयुक्त होते हैं, उन्हें कैश किया जाएगा और पहले डाउनलोड के बाद पुन: उपयोग किया जाएगा। यह साइट पर बैंडविड्थ और डाउनलोड समय को और कम करता है।<ref>
टेबललेस डिज़ाइन कम एचटीएमएल टैग वाले वेब पेज बनाता है जो पूरी तरह से सामग्री की स्थिति के लिए उपयोग किए जाते हैं। इसका सामान्यतः मतलब है कि पेज डाउनलोड करने के लिए खुद छोटे हो जाते हैं। दर्शन का तात्पर्य है कि लेआउट और पोजिशनिंग के संबंध में सभी निर्देश बाहरी स्टाइल शीट्स में स्थानांतरित किए जाएं। एचटीटीपी की मूलभूत क्षमताओं के अनुसार, क्योंकि ये संभवतः ही कभी बदलते हैं और वे कई वेब पेजों पर सामान्यतः प्रयुक्त होते हैं, उन्हें कैश किया जाएगा और पहले डाउनलोड के बाद पुन: उपयोग किया जाएगा। यह साइट पर बैंडविड्थ और डाउनलोड समय को और कम करता है।<ref>
{{cite web
{{cite web
| url=http://www.alistapart.com/articles/slashdot/
| url=http://www.alistapart.com/articles/slashdot/
Line 106: Line 107:


=== रखरखाव ===
=== रखरखाव ===
साइट के उद्देश्य के आधार पर वेबसाइट को बनाए रखने के लिए वेबसाइट की दृश्य शैली में छोटे और बड़े दोनों तरह के लगातार बदलाव की आवश्यकता हो सकती है। टेबल-आधारित लेआउट के अनुसार , लेआउट HTML का ही हिस्सा है। इस प्रकार, [[एचटीएमएल संपादक]]ों जैसे टेम्पलेट-आधारित विज़ुअल संपादकों की सहायता के बिना, पूरी साइट पर तत्वों के स्थितीय लेआउट को बदलने के लिए आवश्यक दोहराव वाले परिवर्तनों की मात्रा के आधार पर बहुत अधिक प्रयास की आवश्यकता हो सकती है। यहां तक ​​कि [[sed]] या इसी तरह की वैश्विक फाइंड-एंड-रिप्लेस यूटिलिटीज को नियोजित करना भी समस्या को पूरी तरह से कम नहीं कर सकता है।
साइट के उद्देश्य के आधार पर वेबसाइट को बनाए रखने के लिए वेबसाइट की दृश्य शैली में छोटे और बड़े दोनों तरह के लगातार बदलाव की आवश्यकता हो सकती है। टेबल-आधारित लेआउट के अनुसार , लेआउट एचटीएमएल का ही हिस्सा है। इस प्रकार, [[एचटीएमएल संपादक]]ों जैसे टेम्पलेट-आधारित विज़ुअल संपादकों की सहायता के बिना, पूरी साइट पर तत्वों के स्थितीय लेआउट को बदलने के लिए आवश्यक दोहराव वाले परिवर्तनों की मात्रा के आधार पर बहुत अधिक प्रयास की आवश्यकता हो सकती है। यहां तक ​​कि [[sed]] या इसी तरह की वैश्विक फाइंड-एंड-रिप्लेस यूटिलिटीज को नियोजित करना भी समस्या को पूरी तरह से कम नहीं कर सकता है।


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


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


== यह भी देखें ==
== यह भी देखें ==
Line 124: Line 125:
== बाहरी संबंध ==
== बाहरी संबंध ==
* [http://www.w3.org/2002/03/csslayout-howto.html.en W3C Tableless layout HOWTO]
* [http://www.w3.org/2002/03/csslayout-howto.html.en W3C Tableless layout HOWTO]
* [https://web.archive.org/web/20090216193839/http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/ 13 Reasons Why CSS Is Superior to Tables in Website Design]
* [https://web.archive.org/web/20090216193839/http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/ 13 Reasons Why सीएसएस Is Superior to Tables in Website Design]
* [http://www.opendesigns.org/website-templates/ Open Designs] (A collection of W3C-compliant tableless web templates)
* [http://www.opendesigns.org/website-templates/ Open Designs] (A collection of W3C-compliant tableless web templates)
[[Category: वेब डिजाइन]] [[Category: वेब पहुंच]] [[Category: कैस्केडिंग स्टाइल शीट्स | कैस्केडिंग स्टाइल शीट्स ]] [[Category: प्रतिक्रियात्मक वेब डिज़ाइन]]  
[[Category: वेब डिजाइन]] [[Category: वेब पहुंच]] [[Category: कैस्केडिंग स्टाइल शीट्स | कैस्केडिंग स्टाइल शीट्स ]] [[Category: प्रतिक्रियात्मक वेब डिज़ाइन]]  

Revision as of 20:12, 28 February 2023

Cascading Style Sheets
Concepts
Philosophies
Tools
Comparisons

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

इतिहास

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

सन् 1990 के दशक के अंत में पहले उचित रूप से शक्तिशाली WYSIWYG (विसीविग) संपादक बाजार में आए थे। जिसका अर्थ यह था कि वेब डिजाइनरों को अब वेब पेज बनाने के लिए एचटीएमएल की तकनीकी समझ की आवश्यकता नहीं है।[2] चूँकि ऐसे संपादकों ने अप्रत्यक्ष रूप से डिजाइन तत्वों को स्थान देने के लिए नेस्टेड तालिकाओं के व्यापक उपयोग को प्रोत्साहित किया गया था। जैसा कि डिजाइनरों ने इन संपादकों में अपने दस्तावेज़ संपादित किए है और दस्तावेज़ में अनावश्यक कोड और खाली तत्व जोड़े गए है। इसके अतिरिक्त WYSIWYG (विसीविग) संपादक का उपयोग करते समय अकुशल डिजाइनरों द्वारा आवश्यकता से अधिक तालिकाओं का उपयोग करने की संभावना थी। इस अभ्यास ने अधिकांशतः तालिकाओं के अंदर नेस्टेड कई तालिकाओं के साथ-साथ अनावश्यक पंक्तियों और स्तंभों वाली तालिकाओं का नेतृत्व किया गया था। चूँकि स्लाइसिंग टूल के साथ ग्राफ़िक संपादकों का उपयोग जो एचटीएमएल और छवियों को सीधे आउटपुट करता है और अधिकांशतः 1 पिक्सेल ऊंचाई या चौड़ाई की कई पंक्तियों वाली तालिकाओं के साथ खराब कोड को भी बढ़ावा देता है। अतः कभी-कभी वास्तविक सामग्री की तुलना में सामग्री को प्रस्तुत करने के लिए कोड की कई पंक्तियों का उपयोग किया जाता था।

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

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

दत्तक ग्रहण

सीएसएस1 विनिर्देश दिसंबर सन् 1996 में विश्वव्यापी वेब संकाय द्वारा प्रकाशित किया गया था।[4] वेब पहुंच में सुधार के उद्देश्य से और एचटीएमएल दस्तावेज़ों में शब्दार्थ कंप्यूटर विज्ञान सामग्री से स्टाइल शीट में प्रस्तुतिकरण विवरण को अलग करने पर बल देना। मई 1998 में सीएसएस2 (बाद में सीएसएस 2.1 और सीएसएस 2.2 में संशोधित) ने स्थिति और टेबल लेआउट के लिए सुविधाओं के साथ सीएसएस1 का विस्तार किया।

संपूर्ण वेब पेजों के लेआउट को नियंत्रित करने के लिए सीएसएस के अतिरिक्त एचटीएमएल तालिकाओं का उपयोग करने की प्राथमिकता कई कारणों से थी:

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

सीएसएस-आधारित लेआउट को अपनाने में लैंडमार्क में फरवरी 2001 का वेब मानक प्रोजेक्ट का ब्राउज़र अपग्रेड अभियान और वेब डिज़ाइन पत्रिका सूची अलग का साथ नया डिज़ाइन सम्मिलित है, जिसके बाद 2002 में वायर्ड (पत्रिका) का नया स्वरूप सम्मिलित है।[5] 2003 में प्रारंभ की गई सीएसएस ज़ेन गार्डन वेबसाइट को टेबललेस लेआउट को लोकप्रिय बनाने का श्रेय दिया जाता है।[6]


औचित्य

एचटीएमएल तालिकाओं का अभीष्ट और शब्दार्थ उद्देश्य प्रस्तुत करने वाली तालिका (सूचना) में निहित है[3][7] पेज डालने के अतिरिक्त।[8] पृष्ठ लेआउट के लिए सीएसएस का उपयोग करने के लाभों में विभिन्न प्रकार के उपयोगकर्ता एजेंटों का उपयोग करके उपयोगकर्ताओं की व्यापक विविधता के लिए सूचना की उत्तम पहुंच सम्मिलित है। बड़ी संख्या में शब्दार्थ अर्थहीन के रूप में बैंडविड्थ बचत होती है ‎<table>, ‎<tr> और ‎<td> टैग अंकितनों पृष्ठों से हटा दिए जाते हैं, किन्तु कम, किन्तु अधिक अर्थपूर्ण शीर्षक, पैराग्राफ और सूचियां छोड़ दी जाती हैं। लेआउट निर्देश साइट-व्यापी सीएसएस स्टाइलशीट में स्थानांतरित किए जाते हैं, जो बार HTTP हो सकते हैं और वेब कैश पुन: उपयोग के लिए हो सकते हैं, जबकि प्रत्येक आगंतुक साइट पर नेविगेट करता है। साइटें अधिक रख-रखाव योग्य हो सकती हैं क्योंकि विशिष्ट सीएसएस के मार्क-अप को बदलकर, उस स्टाइलशीट पर निर्भर प्रत्येक पृष्ठ को प्रभावित करके पूरी साइट को केवल ही पास में रीस्टाइल या री-ब्रांड किया जा सकता है। नई एचटीएमएल सामग्री को इस तरह से जोड़ा जा सकता है कि बिना किसी और प्रयास के उपस्तिथ सीएसएस द्वारा लगातार लेआउट नियम तुरंत प्रयुक्त किए जाते हैं।

लाभ

अभिगम्यता

Main articles: Web accessibility and Search engine optimization

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

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

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

W3C के वेब सामग्री अभिगम्यता दिशानिर्देश के दिशानिर्देश सं। 3 राज्य मार्कअप और स्टाइल शीट का उपयोग करते हैं और ठीक से करते हैं।[9] दिशानिर्देश का चेकपॉइंट 3.3, प्राथमिकता-2 चेकपॉइंट, कहता है कि लेआउट और प्रस्तुति को नियंत्रित करने के लिए स्टाइल शीट का उपयोग करें।[10]


बैंडविड्थ बचत

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


रखरखाव

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

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

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

यह भी देखें

संदर्भ

  1. ↑ Gruber, Jordan S. (1997-02-01). "साइट से बाहर". Wired.
  2. ↑ Maas, Benard. "WYSIWYG संपादकों का संक्षिप्त इतिहास". 1PMWD. Retrieved 10 February 2015. Microsoft Office FrontPage was released as a bundle of the 1997 version of the Microsoft Office, it was the first time that a robust, commercial HTML WYSIWYG editor-and-publisher was available for every person to use... When a webpage built out of the WYSIWYG MS FrontPage software would run with a backend FPSE in place it would enjoy the full strength that a technologist could possibly build by writing HTML code from scratch. Web designers no longer needed a technical understanding of HTML to build web pages.
  3. ↑ 3.0 3.1 Jennifer Kyrnin. "Tables for Tabular Data — What is Tabular Data? When to Use Tables in a Standards-Based XHTML Document". About.com, a part of The New York Times Company. Retrieved 2009-10-22.
  4. ↑ Lie, Håkon Wium; Bos, Bert (1996-12-17). "W3C Recommendation: Cascading Style Sheets, Level 1". W3C. Archived from the original on 1997-06-05. Retrieved 2019-04-19.
  5. ↑ Zeldman, Jeffrey (2003-05-14). वेब मानकों के साथ डिजाइनिंग (1st ed.). Indianapolis: New Riders. pp. 120-134. ISBN 978-0-7357-1201-0.
  6. ↑ Zeldman, Jeffrey (2007). वेब मानकों के साथ डिजाइनिंग (2nd ed.). Berkeley: New Riders. p. 137. ISBN 978-0-321-38555-0.
  7. ↑ "17.2.1 Anonymous table objects". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. 2009. Retrieved 2009-10-23.
  8. ↑ Dominique Hazaël-Massieux (2005). "Tableless layout HOWTO". W3C. Retrieved 2007-09-08.
  9. ↑ "Web Content Accessibility Guidelines 1.0". W3C. 1999. Retrieved 2009-09-19. Guideline 3. Use markup and style sheets and do so properly.
  10. ↑ "Techniques for Web Content Accessibility Guidelines 1.0". W3C. 2000. Retrieved 2009-09-19. Use style sheets to control layout and presentation.
  11. ↑ Daniel M. Frommelt (2003). "Retooling Slashdot with Web Standards". A List Apart Magazine. Retrieved 2009-09-20.
  12. ↑ Dan Shafer (2003). "HTML Utopia: Designing Without Tables Using CSS, Chapter 4: CSS Website Design". SitePoint Pty. Retrieved 2009-09-20. ...on top of the organizational advantages described above, the browser has less code to download. On heavily designed sites, or sites with hundreds of pages or more, this reduced download time can have a significant impact both on the user experience, and on your bandwidth costs.


बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=टेबललेस_वेब_डिज़ाइन&oldid=99425’