मार्कअपचे झेन मास्टर होण्यासाठी शिका

मार्कअप, किंवा मार्कअप, मार्कअप किंवा टॅगिंग भाषांचा संदर्भ आहे एचटीएमएल आणि सीएसएस, आणि वेब टेम्पलेट तयार करण्यासाठी एकामागून एक लेबले उघडणे आणि बंद करणे या सर्वांसाठी किती वेदनादायक आहे हे आपल्या सर्वांना माहित आहे ...

नक्कीच यावर उपाय आहेत, त्यापैकी एक म्हणजे आयडीई सारख्या स्वयंपूर्णतेचे अँकी कचरा ब्लूग्रीफॉन आपण त्याच्याकडून प्लगइन खरेदी न केल्यास त्रासदायक o कोमोडो संपादन खूप जड... मुद्दा असा आहे की आयडीई किंवा कोड संपादक बरेच पर्यायांसह लोड केलेले असतात आणि बर्‍याच वेळा अकल्पनीय मार्गांनी कामात अडथळा आणतात; अशी परिस्थिती आहे अँकी जे आपण ग्राफिकली व्युत्पन्न करता ते कचरा कोड्याने भरते आणि जड, महाग आणि कुरुप आहे. ब्लूग्रीफॉन हे मुख्यतः त्रासदायक आहे कारण ते विनामूल्य, विनामूल्य आहे, परंतु अर्धे पर्याय पेड वापरकर्त्यांसाठी राखीव आहेत ... ते मजेदार नाही. आणि शेवटी आमच्याकडे आहे कोमोडो-संपादन, जे बर्‍यापैकी चांगले, सामर्थ्यशाली आणि पर्यायांनी परिपूर्ण आहे परंतु ते जड आहे (100 मैडब्ल्यू इडल मध्ये) आणि ते स्थापित करणे त्रासदायक आहे.

वेब डेव्हलपर किंवा वेब डिझायनरचे सर्वोत्तम शस्त्र आयडीई हे युद्धाच्या टाकीच्या शैलीत नसलेले वरच्या बाजूला एक हजार शस्त्रे असतात, हे एक साधा मजकूर संपादक आहे, काही प्लगइन्स आणि आजारी व्यक्तीप्रमाणे टाइप करण्याची क्षमता ... ची जादू जोडा झेन कोडिंग आणि त्यांच्या बोटावर कधीही तयार केलेले चिन्हांकित करण्याचे सर्वोत्तम साधन असेल (किमान माझ्यासाठी).

पण ... काय आहे? झेन कोडिंग?

सोपे, हे एक विशेष प्लगइन आहे जे एचटीएमएल आणि सीएसएस मध्ये तयार केलेल्या ड्रॉप-डाउन अ‍ॅबस्ट्रॅक्शन लेयरचे कार्य करते Javascript आणि बर्‍याच प्रसिद्ध प्रकाशकांना उपलब्ध (नोटपैड ++, कोमोडो-एडिट, गेडिट, केट, ब्लू फिश, गेनी, ड्रीमव्हीव्हर, इत्यादी).

अहो, आपण काय म्हणत आहात हे मला अजूनही ध्यानात नाही.

म्हणून मी तुम्हाला एक साधे उदाहरण देतो; ड्रॉप-डाऊन अ‍ॅबस्ट्रॅक्शन गोष्ट आठवते? बरं, ते संकुचित करा, कल्पना करा की आपण एचटीएमएल / सीएसएस कोड एका ओळीत कोसळल्या पाहिजेत आणि पडद्यासारखा उलगडू शकता किंवा परत दुमडु शकता ... कसे पहायचे आहे? आपण ते सुनिश्चित करण्यासाठी आपल्याकडे दोन गोष्टी आहेत हे कार्य करण्यासाठी:

आहे झेन कोडिंग आपल्या संपादकात स्थापित.
कमांड्स वापरा आणि सिंटॅक्स वापरा.

ठीक आहे, कोडला बोटं:

html>head+body

कोडची ती ओळ दिसते? पण ते HTML साठी वाक्यरचना आहे, हे सोपे आहे:

प्रथम आपण टॅगचे नाव (एचटीएमएल) ठेवले आणि नंतर आपण त्या टॅगमध्ये (>) कोणत्या टॅगमध्ये जात असल्याचे सूचित केले आणि त्या टॅगचे नाव (डोके आणि मुख्य भाग). '+' चिन्ह हे सूचित करते की डोके आणि शरीर दोन भिन्न लेबल आहेत आणि ते दोघेही इतरांमधे नसतात, हे असे म्हणण्यासारखे आहे «एकत्र पण मिसळलेले नाही«… तर मग जादू की दाबताना कोडची ती ओळ काय निर्माण करते ते पाहूया (माझ्या बाबतीत सीटीआरएल + ई):

तंतोतंत, कोडच्या 4 ओळी एकामध्ये तयार केल्या जातात, जेव्हा आपण योग्य की संयोजन दाबाल तेव्हा जादूने दिसून येते ... आणि बरेच अधिक असू शकतात; उदाहरणार्थ:

html>head+body>ul#lista_ordenada>li.listilla*5

समान वाक्यरचना, परंतु आम्ही आणखी काही जोडतो ... आपल्याला काही सीएसएस माहित असल्यास आपल्याला कळेल की आम्ही एक आयडी, वर्ग आणि काही जोडत आहोत जे आपल्याला नक्कीच माहित नव्हते; गुणक… हे काय आहे !? संभोग आपण मला गोंधळात टाकता!

शांत व्हा, हे अगदी सोपे आहे, आम्ही वर सांगितले की शरीरात एक टॅग प्रविष्ट करा »उल», काही विचित्र नाही, मी वर वरील स्पष्टीकरण दिले, नंतर आम्ही एक आयडी नियुक्त केला आहे, जर आपल्याला सीएसएस माहित असेल तर आपल्याला समजेल की हे यासह ओळखले गेले आहेत चिन्ह '#' आणि त्या अनअर्डर्ड यादीमध्ये (उल) आम्ही वर्ग (वर्ग) लिस्टिल्लासह पाच लेबले जोडतो, मी थोडक्यात हे स्पष्ट करते. खरं तर हे अगदी सोपे आहे, '#' म्हणजे तो आयडी असल्याचे दर्शविते, तर 'li.listilla' असे म्हणतात की आम्हाला लिस्टील्ला «li वर्ग = लिस्टिला class या वर्गात" li "असे लेबल तयार करावे आणि नंतर,त्या पाच वेळा पुन्हा करा«. आम्हाला काय परिणाम देते:

एका ओळीत आणि बर्‍याच कमी वेळात कोडच्या बारा ओळी लिहिल्या गेल्या 😉

आणि हे सीएसएसद्वारे देखील केले जाऊ शकते, तथापि मी स्पष्ट दर्शवून लेख वाढवणार नाही (खाली मी तुम्हाला फसवणूक एक संपूर्ण यादी देईन झेन कोडिंग).

मला हे सांगणे आवश्यक आहे की हे एकामध्ये झिलियन लाख हजार रेषा बनविण्यापासून कार्य करत नाही, नाही, यास वापरण्याची एक मर्यादा आणि मार्ग आहे. उदाहरणार्थ आम्हाला असे काहीतरी करायचे असेल तरः

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

सिद्धांतानुसार आम्हाला हे काय द्यावे (शेवटच्या प्रतिमेतील हायलाइट केलेली ओळ पहा):

हे आपल्याला हे देईल:

हे असे दर्शविते की आपण यासह जादू देखील करू शकत नाही; लक्षात ठेवा की कोडचा झेन मास्टर अचूक आणि वेगवान असणे आवश्यक आहे आणि चुकीच्या गोष्टी केल्या जाण्यासाठी वेळ आणि वेग लागतो, म्हणून त्वरेने आणि सह लिहिण्यासाठी योग्य तंत्र झेन कोडिंग हे असे असेल:

html>head>body>ul#lista_ordenada>li.listilla*5

आपण विस्तृत आणि मुख्य टॅग आत:

title+meta

जे आपल्याला अचूक कोड देईल:

तरी झेन कोडिंग आपल्याला दर्शविण्यासाठी बर्‍याच गोष्टी आहेत आणि कदाचित डोक्यात आणखी एक कमांड लाइन लिहिणे चांगले नाही, म्हणून आम्ही दुसरी कमांड वापरतो, «संक्षेप सह विस्तृत करा" माझ्या बाबतीत ctrl + alt + e जी एक छोटी बार उघडेल जिथे आपण झेन कोड लिहू शकतो आणि रिअल टाइममध्ये तो कसा दिसेल हे पाहू शकतो. सावधगिरी बाळगा, मी यासह सर्व काही लिहिण्याची शिफारस करत नाही परंतु आधीपासूनच तयार केलेल्या रचनांमध्ये लिहिण्याची शिफारस करत नाही, म्हणजे प्रथम मोठ्या रचना तयार करा आणि नंतर आपण या पर्यायासह त्याबद्दल तपशीलवार माहिती देऊ शकाल.

आणि मध्ये अनेक सुपर कूल कमांड आहेत झेन कोडिंग, गोष्ट अशी आहे की एकदा आपण त्यांची स्थापना केल्यानंतर आपण त्यांचा शोध घ्या आणि त्यांचा वापर करण्यास शिकलात; या प्लगइनद्वारे आपल्याला सीएसएस किंवा एचटीएमएलसाठी स्वयंपूर्णता किंवा स्निपेट्सची आवश्यकता नाही, खरं तर यासह आपल्याला हे समजेल की या दोन प्रोग्रामिंग भाषांमध्ये या पर्यायांचा एकूणच वेळ वाया जातो 😉

आणि स्वारस्य असलेल्यांसाठी, ची अधिकृत चीटशीट येथे आहे झेन कोडिंग, आपण ते स्वरूपात पाहू शकता ओडीएफ o PDF गोरा येथे