क्या मुझे पहले HTML या CSS लिखना चाहिए?

28

HTML / CSS विकास के लिए बहुत सारी उपमाएँ हैं; जो एक शुरुआत के लिए थोड़ा भ्रमित हो सकता है।

HTML = नींव / घर
सीएसएस = दीवारें / ब्लूप्रिंट / वॉलपेपर

क्या यहां कोई सर्वोत्तम अभ्यास है? हमें पहले कौन सा लिखना चाहिए?

coding-style html css

— डैनियल
स्रोत

8

मुझे यकीन नहीं है कि आपको पहले सीएसएस लिखने के बारे में कैसे जाना चाहिए, अगर आप ऐसा करना चाहते हैं।

— TRIG

यह एक सवाल था? जैसे: सामान्य प्रश्न जो कोई पूछ सकता है और उत्तर की प्रतीक्षा कर सकता है?

— एलेक्स यू

82

आपको पहले एक घर बनाना चाहिए, फिर उसे पेंट करना चाहिए।

एक HTML दस्तावेज़ अपने दम पर खड़ा हो सकता है, भले ही यह सुस्त लग सकता है। एक CSS स्टाइल शीट नहीं हो सकती; यह कुछ भी प्रदर्शित करने योग्य नहीं है (कोड के अलावा) लेकिन प्रदर्शन के लिए निर्देश।

यह एक अलग मुद्दा है कि पेंटिंग के दौरान, आप घर में बदलाव करने की इच्छा कर सकते हैं। वास्तविक घरों के साथ जो आमतौर पर संभव नहीं है, लेकिन HTML + CSS विकास में, यह ध्यान देना आम बात है कि स्टाइल को आसान बनाने के लिए आपको अपने HTML दस्तावेज़ में अतिरिक्त मार्कअप की आवश्यकता होती है। (शक्तिशाली CSS3 चयनकर्ताओं की बदौलत इसका इस्तेमाल कम होना आम बात है।)

— जुक्का के। कोरपेला
स्रोत

मैं ज्यादातर सहमत हूं। एकमात्र समस्या यह है कि जब आप लेआउट..का ग्रिड सिस्टम के लिए CSS का उपयोग करते हैं।

— डैनियल

@ डैनियल, यह एक समस्या क्यों होगी? CSS में लेआउट करने के कई तरीके हैं। पुराने तरीकों में से कुछ आपको HTML दस्तावेज़ में स्वतंत्र रूप से तत्वों को पुनर्व्यवस्थित करने की अनुमति नहीं देते हैं। लेकिन उदाहरण के लिए पूर्ण स्थिति आपको ऐसा करने की अनुमति देती है, और इसलिए CSS3 ग्रिड सिस्टम (जो विकास के अधीन है)। यदि पुराने लेआउट टूल का उपयोग किया जाता है, तो वास्तव में HTML दस्तावेज़ को लेआउट परिवर्तन के बारे में विचार करने पर पुनर्गठन करने की आवश्यकता हो सकती है।

— जुक्का के। कोर्पेला

1

@ अधिक लेआउट आप सीएसएस के साथ करते हैं आसान डिजाइन सड़क को बनाए रखने के लिए होगा। अधिकांश साइट अपने जीवन काल के दौरान डिजाइन परिवर्तन से गुजरती हैं। यह पूरा करने के लिए बहुत आसान है अगर आपको बस इतना करना है कि सीएसएस को बदल दें।

— केनेथ

7

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

— थॉमस

4

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

— कार्सन 63000

13

मैं हमेशा पेन और पेपर का उपयोग करता हूं, पूर्ण आकार के पेपर, टू-स्केल ड्राइंग।

यदि आपके पास अपना डिज़ाइन नहीं है, तो यह है। यदि आप अपने डिजाइन में आश्वस्त हैं, तो मेरे पास एक संतुलित दृष्टिकोण है; html संरचना है, गोंद को सीएसएस। (HTML, CSS) अवधारणा 'tuples' में निर्माण करते रहें।

(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)

(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)

और इसी तरह।

वैसे भी मैं इसे कैसे करता हूं।

— निकोलस ऑर्लोव्स्की
स्रोत

2

आपके द्वारा बनाई गई वेबसाइट / वेब एप्लिकेशन के प्रकार और उस संदर्भ के प्रकार पर बहुत कुछ निर्भर करता है जिसमें इसका उपयोग होने वाला है।

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

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

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

— tdammers
स्रोत

2

भले ही यह बहुत है पुराना प्रश्नोत्तर है, फिर भी मुझे इस पर टिप्पणी करने की आवश्यकता और जिम्मेदारी महसूस होती है।

हां, सीएसएस से पहले HTML लिखा जाना चाहिए, हालांकि ...

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

आप परतों में एक वेबसाइट का निर्माण करते हैं, जैसे कि आप एक बहुस्तरीय केक बना रहे हैं।

पहली परत - पहले आप आधार का निर्माण करते हैं, कंटेनर डिव, जिसमें न्यूनतम ऊंचाई और चौड़ाई सीएसएस होती है।

2 परत - फिर आप अगली परत बनाते हैं, पृष्ठ के बड़े खंड (संरचना के लिए divs और स्टाइलिंग), जैसे कि पंक्तियों या स्तंभों की तरह दिखने वाले खंड।

3 परत और परे - फिर आप अनुभागों की दूसरी परत के भीतर जोड़ते रहते हैं।

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

अंत में, " * {बाह्यरेखा: 1px बिंदीदार लाल " का उपयोग करके देखें अपने सभी तत्वों की एक रूपरेखा प्राप्त करने के लिए " , जैसा कि आप उन्हें अपने पेज पर स्टाइल के साथ जोड़ते हैं, आप उनकी रूपरेखा देख सकते हैं और यह अनुमान लगाने के बारे में चिंता करने की ज़रूरत नहीं है कि यह तब तक क्या दिखता है। आप अपनी पृष्ठभूमि के रंग जोड़ते हैं। मैं इस विशेष उपयोग के मामले में सीमा से बचता हूं क्योंकि सीमाएं तत्वों पर पिक्सेल जोड़ते हैं, रूपरेखा एक ओवरले है।

यह एक कोशिश दे, धन्यवाद!

— Speros
स्रोत

अगर आप अंततः MVC फ्रेमवर्क जैसे कि AngularJS का उपयोग करने के लिए आगे बढ़ते हैं, तो यह आपकी अच्छी तरह से सेवा करेगा, जहाँ आप इसका वर्णन करने वाली परतों का विचार वैचारिक रूप से अच्छी तरह से मैप कर सकते हैं, जिससे आप पृष्ठ बनाने के लिए नेस्टेड मार्गों / दृश्यों का उपयोग कर सकते हैं। श्रेणीबद्ध तरीके से।

— सीन बर्टन

1

मेरा मानना है कि वेबसाइट संरचना (एचटीएमएल) के साथ काम करने से सबसे पहले और अधिक समझ में आता है क्योंकि तब आपको तत्वों का अंदाजा होगा और जब आपकी वेबसाइट को स्टाइल और फॉर्मेट करने का नाम आएगा।

0

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

— जेकब
स्रोत

0

घर (ग्रिड लेआउट) के साथ-साथ यह कैसे डिजाइन किया जाएगा, इस विचार के साथ; ग्रिड के साथ घर (HTML) का निर्माण करें; फिर इसे सजाने (सीएसएस शैली शीट)।

आपके द्वारा पहला घर (HTML पेज) बनाने के बाद, आप बस उसी सजावट (CSS स्टाइल शीट) को लागू कर सकते हैं जैसे आप साथ चलते हैं। जैसे-जैसे आप साथ जाते हैं आप सजावट को छोटा कर सकते हैं।

आखिरकार, आप रिडकोरेट (CSS स्टाइल शीट को फिर से करना) कर सकते हैं।

— BillThor
स्रोत

0

आपने सीखने और निर्माण के लिए वास्तव में खराब फ्रेमिंग को चुना है।

यहां दो ऑर्थोगोनल मुद्दे हैं।

मैं एक साइट कैसे बनाऊं जो मेरी जरूरतों को पूरा करे?
मैं वेबसाइट कैसे बनाऊं?

वे दो बहुत भिन्न कार्य हैं (और अक्सर कर सकते हैं) अलग-अलग संभावित परस्पर विरोधी दृष्टिकोण की आवश्यकता होती है।

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

यदि आप यह जानने की कोशिश कर रहे हैं कि किसी साइट का निर्माण कैसे किया जाता है, तो साइट का निर्माण करते समय, अन्वेषण और सीखने की एक प्रक्रिया होती है जिसे बनाने से पहले आपको पता होना चाहिए कि क्या बनाना है।

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

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

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

— knowtheory
स्रोत

0

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

तो मेरे लिए यह है: - पहले एक बुनियादी कार्यात्मक 'प्रोटोटाइप' का निर्माण करें, मांग के एक कार्यात्मक ब्लॉक को कवर करते हुए अपने आप को 'यह अच्छा हो सकता है' में डाइविंग से प्रतिबंधित करें / 'जब तक कि वे OBVIOUS न हों तब मुझे इस बाद की चीजों का पुन: उपयोग करने की आवश्यकता हो सकती है। अपने आप को बताएं, आपको इसकी आवश्यकता नहीं है! (YAGNI)। - आपके द्वारा 'कोडिंग कन्वेंशन' के रूप में किए गए निर्णयों को लिखें और उनसे चिपके रहें जैसे php टैग: मैं अपने परिदृश्य तर्क के लिए लघु का उपयोग करता हूं .. लागू होता है और ... नहीं करता है। - मूल स्टाइल जोड़ें, लेकिन खुद को फिर से प्रतिबंधित करें।

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

एक अधिक परिपक्व और अंतिम उत्पाद की ओर अपना रास्ता 'सर्कल' करें।

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

बस मेरे ५० सी.टी.

— Rusty75
स्रोत

0

जब आप किसी वेब पेज की तुलना घर से करते हैं:

HTML = नींव / घर CSS = दीवारें / ब्लूप्रिंट / वॉलपेपर

आप मध्य हवा में दीवारों को कैसे तैरने जा रहे हैं जब तक कि आप उस नींव को नहीं बनाते हैं, जिस पर वे बैठते हैं? आप अपने पेज को स्टाइल करने के लिए सीएसएस कैसे लिख सकते हैं जब तक कि आपके पास HTML टैग नहीं लिखा है कि आप शैलियों को लागू कर रहे हैं।

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

— पुरवी बरोट
स्रोत